/* Pay-Sidekick design tokens — VibeProSoft Brand & Style Guide v1.0.
   Pure-black background, glass cards, blue-intelligence primary, amber accent.
   Token names are stable (--brand-navy etc.) for component reuse; values map
   to the VibeProSoft palette. */

:root {
  /* Brand — VibeProSoft v1.0 */
  --vps-blue:     oklch(0.55 0.22 257);   /* #2563eb intelligence */
  --vps-blue-2:   oklch(0.68 0.18 252);   /* lighter rim */
  --vps-amber:    oklch(0.85 0.16 88);    /* #fcd34d accent (sparing) */
  --vps-amber-2:  oklch(0.90 0.13 90);

  /* Legacy aliases kept so existing components don't need rewrites. */
  --brand-navy:   var(--vps-blue);
  --brand-navy-2: var(--vps-blue-2);
  --brand-gold:   var(--vps-amber);
  --brand-gold-2: var(--vps-amber-2);

  /* Functional */
  --net:          oklch(0.72 0.16 152);   /* take-home / positive */
  --net-2:        oklch(0.80 0.13 152);
  --tax:          oklch(0.66 0.20 25);    /* deductions / negative */
  --bonus:        var(--vps-amber);       /* variable pay accent */

  /* Surface — dark default per VibeProSoft brand */
  --bg:           oklch(0.13 0.012 254);   /* near-black */
  --surface:      oklch(0.18 0.014 254 / 0.65);  /* glass card */
  --surface-2:    oklch(0.22 0.014 254 / 0.7);
  --surface-3:    oklch(0.27 0.014 254 / 0.75);
  --line:         oklch(0.30 0.014 254 / 0.5);
  --line-2:       oklch(0.40 0.014 254 / 0.7);

  --ink:          oklch(0.97 0.005 85);
  --ink-2:        oklch(0.82 0.008 85);
  --ink-3:        oklch(0.65 0.01 85);
  --ink-4:        oklch(0.50 0.01 85);

  /* Hero gradient — for the masthead band */
  --hero-grad: linear-gradient(135deg,
    oklch(1 0 0) 0%,
    oklch(0.92 0.04 252) 50%,
    oklch(0.88 0.12 88) 100%);

  /* Type */
  --font-sans: "Inter Tight", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif;

  /* Radii / shadow */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --shadow-card: 0 1px 0 oklch(1 0 0 / 0.04) inset, 0 1px 2px oklch(0 0 0 / 0.4), 0 8px 24px -10px oklch(0 0 0 / 0.55);
  --shadow-pop:  0 1px 0 oklch(1 0 0 / 0.05) inset, 0 14px 36px -10px oklch(0 0 0 / 0.7);

  /* Glass effect — apply via backdrop-filter on .ps-card */
  --glass-blur: blur(14px) saturate(140%);
}

/* ─── Mobile / tablet polish ───────────────────────────────────────────
   The React SPA's Header packs many inline-styled pills (province, year,
   confidence, customize, theme, account, sign-out). To avoid rebundling
   to touch every JSX inline style, we ride on the surrounding container's
   font-size to scale them down on small viewports. Inputs and selects
   stay at 16px to defeat iOS Safari focus-zoom. */
@media (max-width: 720px) {
  header { font-size: 12px; gap: 8px !important; }
  header button, header a { min-height: 36px; }
}
@media (max-width: 480px) {
  header > div:first-child img { width: 36px !important; height: 32px !important; }
  header > div:first-child > div > div:first-child { font-size: 18px !important; }
  header > div:first-child > div > div:nth-child(2) { font-size: 9px !important; }
}
/* Prevent iOS Safari auto-zoom on input focus — 16px minimum font-size. */
input, select, textarea { font-size: 16px; }
@media (min-width: 720px) { input, select, textarea { font-size: 14px; } }

/* Light theme available for users who prefer it; flip via data-theme="light". */
[data-theme="light"] {
  --bg:           oklch(0.985 0.003 85);   /* warm off-white */
  --surface:      oklch(1 0 0);
  --surface-2:    oklch(0.965 0.005 85);
  --surface-3:    oklch(0.93 0.007 85);
  --line:         oklch(0.90 0.008 85);
  --line-2:       oklch(0.84 0.01 85);

  --ink:          oklch(0.22 0.015 254);
  --ink-2:        oklch(0.42 0.012 254);
  --ink-3:        oklch(0.62 0.012 254);
  --ink-4:        oklch(0.78 0.01 254);

  --shadow-card: 0 1px 0 oklch(1 0 0 / 0.6) inset, 0 1px 2px oklch(0 0 0 / 0.04), 0 4px 16px -8px oklch(0 0 0 / 0.08);
  --shadow-pop:  0 1px 0 oklch(1 0 0 / 0.6) inset, 0 12px 32px -12px oklch(0 0 0 / 0.18), 0 2px 6px -2px oklch(0 0 0 / 0.06);
  --glass-blur: none;
}

/* Background ambience — radial blue glow on the dark theme to echo
   the Hub's intelligence-led visual language. */
body {
  background:
    radial-gradient(120% 80% at 20% -10%, oklch(0.30 0.10 257 / 0.35), transparent 60%),
    radial-gradient(80% 60% at 110% 10%, oklch(0.40 0.13 88 / 0.18), transparent 65%),
    var(--bg);
  background-attachment: fixed;
}
[data-theme="light"] body { background: var(--bg); }

/* Utility — subtle "paper" hairline grid for placeholder / chart contexts */
.ps-hairline {
  background-image:
    linear-gradient(to right, color-mix(in oklch, var(--line), transparent 50%) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklch, var(--line), transparent 50%) 1px, transparent 1px);
  background-size: 8px 8px;
}