/* ======================================================
   WAGET — Design Tokens  (source of truth; see design.md)
   Hallmark · genre: modern-minimal · macrostructure: Workbench
   Single light "paper" mode + brand navy bookends. OKLCH.
   ====================================================== */

:root {
  /* ---------- BRAND (matched to iOS/Android app; source hex in comments) ---------- */
  --accent:        oklch(62% 0.215 256);   /* #007AFF brand blue — primary accent */
  --accent-deep:   oklch(54% 0.20 257);    /* #0066D6 — hover / pressed */
  --accent-soft:   oklch(62% 0.215 256 / 0.10);
  --accent-ink:    oklch(99% 0.002 256);   /* text on accent */
  --gold:          oklch(76% 0.146 70);    /* #F5A623 — secondary accent */
  --gold-deep:     oklch(72% 0.14 67);     /* #E89D1C */
  --gold-soft:     oklch(76% 0.146 70 / 0.14);
  --income:        oklch(73% 0.18 149);    /* #34C759 — finance data only */
  --expense:       oklch(64% 0.22 26);     /* #FF453A — finance data only */

  /* ---------- LIGHT PAPER (cool neutrals, anchor hue 258) ---------- */
  --paper:         oklch(98.5% 0.003 258); /* page base */
  --paper-2:       oklch(97% 0.005 258);   /* card surface */
  --paper-3:       oklch(94.5% 0.007 258); /* raised / hover / inset */
  --rule:          oklch(91% 0.008 258);   /* hairline border */
  --rule-strong:   oklch(86% 0.011 258);
  --ink:           oklch(24% 0.022 262);   /* primary text (navy-ink) */
  --ink-2:         oklch(46% 0.018 260);   /* muted text */
  --ink-3:         oklch(62% 0.013 258);   /* faint text / captions */

  /* ---------- NAVY CANVAS (hero + footer bookends; #0B0F18 family) ---------- */
  --navy:          oklch(16% 0.018 264);   /* #0B0F18 */
  --navy-2:        oklch(19.5% 0.021 263); /* surface on navy */
  --navy-3:        oklch(24% 0.024 262);   /* card on navy */
  --navy-rule:     oklch(30% 0.022 262);   /* border on navy */
  --on-navy:       oklch(96% 0.004 258);   /* text on navy */
  --on-navy-2:     oklch(73% 0.013 258);   /* muted on navy */
  --on-navy-3:     oklch(56% 0.015 260);   /* faint on navy */

  --focus:         oklch(62% 0.215 256);

  /* ---------- TYPE (single family: Inter — brand-matched, smooth) ---------- */
  --font-display:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --num:           "tnum" 1, "cv05" 1;     /* tabular money figures */

  --text-xs:       0.75rem;    /* 12px */
  --text-sm:       0.8125rem;  /* 13px */
  --text-base:     0.9375rem;  /* 15px */
  --text-md:       1.0625rem;  /* 17px */
  --text-lg:       1.3125rem;  /* 21px */
  --text-xl:       1.625rem;   /* 26px */
  --text-2xl:      2.0625rem;  /* 33px */
  --text-3xl:      2.625rem;   /* 42px */
  --text-display:  clamp(2.5rem, 5vw + 0.5rem, 4.5rem);
  --text-display-s: clamp(1.9rem, 3.6vw + 0.5rem, 3rem);

  /* ---------- SPACING (4pt, named by role) ---------- */
  --space-3xs:     0.125rem;  /*  2px */
  --space-2xs:     0.25rem;   /*  4px */
  --space-xs:      0.5rem;    /*  8px */
  --space-sm:      0.75rem;   /* 12px */
  --space-md:      1rem;      /* 16px */
  --space-lg:      1.5rem;    /* 24px */
  --space-xl:      2.5rem;    /* 40px */
  --space-2xl:     4rem;      /* 64px */
  --space-3xl:     6rem;      /* 96px */
  --space-4xl:     9rem;      /* 144px */

  /* ---------- RADII (tightened from the previous bubbly 12–34px) ---------- */
  --radius-input:  10px;
  --radius-card:   14px;
  --radius-frame:  20px;
  --radius-pill:   999px;

  /* ---------- LAYOUT ---------- */
  --container:     1120px;
  --container-narrow: 760px;
  --header-h:      66px;

  /* ---------- ELEVATION (single soft shadow; no glow) ---------- */
  --shadow-sm:     0 1px 2px oklch(24% 0.02 262 / 0.06);
  --shadow-md:     0 10px 30px oklch(24% 0.02 262 / 0.08);
  --shadow-lg:     0 24px 60px oklch(24% 0.02 262 / 0.12);
  --shadow-navy:   0 24px 60px oklch(0% 0 0 / 0.45);

  /* ---------- MOTION ---------- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro:     120ms;
  --dur-short:     220ms;
  --dur-long:      420ms;

  /* ---------- Z-INDEX (named) ---------- */
  --z-base:        1;
  --z-raised:      10;
  --z-sticky:      200;
  --z-modal:       400;
}