/* ==========================================================================
   STFU v0.39 — Design tokens
   ==========================================================================
   Single source of truth for color, spacing, radius, type and motion.
   Light is the default palette on :root; html[data-theme="dark"] overrides
   the same custom properties — every component reads the semantic names
   below and never hardcodes a theme color itself.

   Legacy aliases at the bottom map the old token names (--ink, --navy,
   --mint, --coral, --muted, --line, --paper, --cream, --surface-0/1/2,
   --soft-line …) that dozens of not-yet-migrated legacy stylesheets still
   reference via var() — so those files repaint correctly in both themes
   without having to rewrite every declaration in them. New code should
   only ever use the semantic names, never the legacy aliases.
   ========================================================================== */

:root {
  color-scheme: light;

  /* -- Canvas & surfaces --------------------------------------------------- */
  --canvas: #faf6ee;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-soft: #f3efe4;
  --border: #e7e0d1;
  --shadow: 0 12px 32px rgba(31, 41, 51, .08);
  --shadow-sm: 0 4px 14px rgba(31, 41, 51, .06);
  --shadow-lg: 0 24px 56px rgba(31, 41, 51, .14);

  /* -- Text ----------------------------------------------------------------- */
  --text-primary: #1b2540;
  --text-secondary: #5b6a7d;
  --text-disabled: #9aa6b4;
  --text-on-accent: #0c2b22;
  --text-on-dark-fill: #ffffff;

  /* -- Brand & semantic colors ----------------------------------------------- */
  --accent: #6fcf9e;
  --accent-strong: #3fae79;
  --accent-soft: #dcf3e6;
  --income: #4fb787;
  --income-soft: #dff3e8;
  --expense: #f2937a;
  --expense-soft: #fbe4dd;
  --savings: #f0b94a;
  --savings-soft: #fbedcf;
  --info: #6fa8dc;
  --info-soft: #e1edf9;
  --danger: #e2604a;
  --danger-soft: #fbe1db;

  /* -- Radius scale ----------------------------------------------------------- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* -- Spacing scale (4px base) ------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* -- Type scale --------------------------------------------------------------- */
  --font-sans: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --font-editorial: 'Playfair Display', Georgia, serif;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 21px;
  --text-xl: 30px;
  --text-2xl: 40px;
  --text-hero: clamp(36px, 4vw, 52px);

  /* -- Motion --------------------------------------------------------------------- */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);

  /* -- Layout ------------------------------------------------------------------------ */
  --sidebar-width: 248px;
  --content-max: 1360px;
  --header-height: 88px;
}

/* -- Dark theme --------------------------------------------------------------------- */
/* Rich midnight/navy, never pure black; ivory text; the same accent hues,
   just tuned for a dark ground so the two themes read as one product. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas: #0d1420;
  --surface: #141d2c;
  --surface-raised: #182335;
  --surface-soft: #1a2536;
  --border: rgba(232, 238, 244, .1);
  --shadow: 0 12px 32px rgba(0, 0, 0, .35);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .3);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, .45);

  --text-primary: #f4f1e8;
  --text-secondary: #a9b6c6;
  --text-disabled: #5c6b7d;
  --text-on-accent: #072017;
  --text-on-dark-fill: #ffffff;

  --accent: #59c793;
  --accent-strong: #7fe0b3;
  --accent-soft: rgba(89, 199, 147, .16);
  --income: #59c793;
  --income-soft: rgba(89, 199, 147, .14);
  --expense: #f2937a;
  --expense-soft: rgba(242, 147, 122, .14);
  --savings: #f0c15e;
  --savings-soft: rgba(240, 193, 94, .14);
  --info: #7fb8ea;
  --info-soft: rgba(127, 184, 234, .14);
  --danger: #f47862;
  --danger-soft: rgba(244, 120, 98, .16);
}

/* Before the toggle/system-preference JS runs, an explicit choice is
   already reflected via data-theme on <html> (set synchronously, see the
   inline snippet in index.html) — but if that inline script hasn't run
   yet for any reason, fall back to the OS preference so a system-dark
   visitor never sees an unstyled light flash. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --canvas: #0d1420;
    --surface: #141d2c;
    --surface-raised: #182335;
    --surface-soft: #1a2536;
    --border: rgba(232, 238, 244, .1);
    --shadow: 0 12px 32px rgba(0, 0, 0, .35);
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, .3);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, .45);
    --text-primary: #f4f1e8;
    --text-secondary: #a9b6c6;
    --text-disabled: #5c6b7d;
    --text-on-accent: #072017;
    --accent: #59c793;
    --accent-strong: #7fe0b3;
    --accent-soft: rgba(89, 199, 147, .16);
    --income: #59c793;
    --income-soft: rgba(89, 199, 147, .14);
    --expense: #f2937a;
    --expense-soft: rgba(242, 147, 122, .14);
    --savings: #f0c15e;
    --savings-soft: rgba(240, 193, 94, .14);
    --info: #7fb8ea;
    --info-soft: rgba(127, 184, 234, .14);
    --danger: #f47862;
    --danger-soft: rgba(244, 120, 98, .16);
  }
}

/* -- Legacy aliases (see file header) ------------------------------------------------ */
:root {
  --ink: var(--text-primary);
  --navy: var(--text-primary);
  --cream: var(--canvas);
  --paper: var(--surface);
  --muted: var(--text-secondary);
  --line: var(--border);
  --mint: var(--accent);
  --coral: var(--expense);
  --surface-0: var(--canvas);
  --surface-1: var(--surface);
  --surface-2: var(--surface-soft);
  --surface-3: var(--surface-soft);
  --soft-line: var(--border);
  --focus-color: var(--accent-strong);
  --gold: var(--savings);
  --gold-strong: var(--savings);
  --stfu-content-max: var(--content-max);
  --stfu-form-max: 560px;
}