/* Pay-Sidekick design tokens.
   Loose interpretation of brand: deep navy + warm gold, with neutrals,
   plus emerald for "net" / positive states. All colors in oklch so we can
   tune chroma/lightness consistently across modes. */

:root {
  /* Brand */
  --brand-navy:   oklch(0.32 0.07 254);   /* logo navy */
  --brand-navy-2: oklch(0.42 0.08 254);
  --brand-gold:   oklch(0.74 0.13 75);    /* logo gold */
  --brand-gold-2: oklch(0.82 0.10 80);

  /* Functional */
  --net:          oklch(0.62 0.13 155);   /* take-home / positive */
  --net-2:        oklch(0.72 0.11 155);
  --tax:          oklch(0.58 0.16 25);    /* deductions / negative */
  --bonus:        oklch(0.70 0.14 60);    /* variable pay accent */

  /* Surface — 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);

  /* 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.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);
}

[data-theme="dark"] {
  --bg:        oklch(0.18 0.012 254);
  --surface:   oklch(0.22 0.014 254);
  --surface-2: oklch(0.26 0.014 254);
  --surface-3: oklch(0.30 0.014 254);
  --line:      oklch(0.34 0.014 254);
  --line-2:    oklch(0.40 0.014 254);

  --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);

  --brand-navy:   oklch(0.62 0.10 254);
  --brand-navy-2: oklch(0.72 0.09 254);

  --shadow-card: 0 1px 0 oklch(1 0 0 / 0.04) inset, 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 20px -8px oklch(0 0 0 / 0.5);
  --shadow-pop:  0 1px 0 oklch(1 0 0 / 0.05) inset, 0 14px 36px -10px oklch(0 0 0 / 0.6);
}

/* 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;
}