/* Reckon — design tokens
   Precise, quiet, British financial instrument. Ledger, not SaaS. */

:root {
  /* ---- Type ---- */
  --font-sans: "Satoshi", "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-2xl: 32px;
  --text-hero: 36px; /* hard cap — this is an app */

  --lh-tight: 1.15;
  --lh-normal: 1.5;

  /* ---- Spacing (4px scale) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  --s12: 48px; --s16: 64px;

  --radius-sm: 4px;
  --radius: 7px;
  --radius-lg: 12px;

  --dur: 170ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---- Light (paper) ---- */
  --paper:        oklch(0.985 0.004 95);
  --surface:      oklch(1 0 0);
  --surface-2:    oklch(0.968 0.005 95);
  --surface-3:    oklch(0.945 0.006 95);
  --ink:          oklch(0.22 0.015 260);
  --ink-2:        oklch(0.42 0.014 260);
  --ink-3:        oklch(0.575 0.012 260);
  --line:         oklch(0.895 0.006 260);
  --line-strong:  oklch(0.82 0.008 260);

  --accent:       oklch(0.52 0.11 165);
  --accent-ink:   oklch(0.985 0.004 95);
  --accent-soft:  oklch(0.945 0.033 165);
  --accent-line:  oklch(0.80 0.06 165);
  --accent-fill:  oklch(0.52 0.11 165 / 0.14);

  --negative:     oklch(0.58 0.14 35);
  --negative-soft:oklch(0.955 0.035 35);
  --negative-line:oklch(0.84 0.07 35);

  --warn:         oklch(0.72 0.13 75);
  --warn-ink:     oklch(0.42 0.10 75);
  --warn-soft:    oklch(0.965 0.045 85);
  --warn-line:    oklch(0.86 0.09 80);

  --focus:        oklch(0.52 0.11 165);
  --shadow-sm: 0 1px 2px oklch(0.22 0.015 260 / 0.05);
  --shadow: 0 1px 2px oklch(0.22 0.015 260 / 0.05), 0 6px 18px oklch(0.22 0.015 260 / 0.06);
  --shadow-lg: 0 12px 40px oklch(0.22 0.015 260 / 0.14);

  --sidebar-w: 232px;
  --header-h: 60px;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper:        oklch(0.17 0.012 260);
  --surface:      oklch(0.205 0.013 260);
  --surface-2:    oklch(0.235 0.014 260);
  --surface-3:    oklch(0.27 0.015 260);
  --ink:          oklch(0.955 0.004 95);
  --ink-2:        oklch(0.80 0.008 260);
  --ink-3:        oklch(0.655 0.011 260);
  --line:         oklch(0.305 0.014 260);
  --line-strong:  oklch(0.40 0.016 260);

  --accent:       oklch(0.70 0.115 165);
  --accent-ink:   oklch(0.17 0.012 260);
  --accent-soft:  oklch(0.28 0.045 165);
  --accent-line:  oklch(0.42 0.07 165);
  --accent-fill:  oklch(0.70 0.115 165 / 0.16);

  --negative:     oklch(0.70 0.135 35);
  --negative-soft:oklch(0.29 0.055 35);
  --negative-line:oklch(0.44 0.08 35);

  --warn:         oklch(0.79 0.13 78);
  --warn-ink:     oklch(0.86 0.11 82);
  --warn-soft:    oklch(0.265 0.038 78);
  --warn-line:    oklch(0.45 0.08 78);

  --focus:        oklch(0.72 0.115 165);
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.35);
  --shadow: 0 1px 2px oklch(0 0 0 / 0.35), 0 8px 22px oklch(0 0 0 / 0.30);
  --shadow-lg: 0 16px 48px oklch(0 0 0 / 0.5);

  color-scheme: dark;
}