/* ============================================================================
   Anchor site tokens — mirrored from the iOS app (DESIGN_SYSTEM.md →
   design-system/src/styles.css). Same ten mode palettes, same glass recipe,
   same serif money. Theme by setting data-mode on any element; everything
   downstream reads the derived tokens (--accent, --bg1..3, --ink...).

   The site is deliberately dark-first: it is "the harbor at night", the app's
   most characteristic look. Every colour is painted explicitly.
   ========================================================================== */

/* Registered so hue changes interpolate (the app's per-mode recolor). Kept at
   top level: Safari has @property without the Paint API. */
@property --m-deep    { syntax: "<color>"; inherits: true; initial-value: #14443B; }
@property --m-primary { syntax: "<color>"; inherits: true; initial-value: #1D5C4F; }
@property --m-bright  { syntax: "<color>"; inherits: true; initial-value: #7FCBB6; }
@property --m-glow    { syntax: "<color>"; inherits: true; initial-value: #9FD8C5; }
@property --m-signal  { syntax: "<color>"; inherits: true; initial-value: #E0A368; }
@property --m-bg1     { syntax: "<color>"; inherits: true; initial-value: #0A1F1A; }
@property --m-bg2     { syntax: "<color>"; inherits: true; initial-value: #10342C; }
@property --m-bg3     { syntax: "<color>"; inherits: true; initial-value: #081814; }

:root {
  color-scheme: dark;

  /* ---- Type: the app's system faces; Newsreader stands in for New York off-Apple */
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: ui-serif, "New York", "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* ---- Type scale (1.25 minor third-ish, display steps clamp) */
  --t-11: 11px; --t-12: 12px; --t-13: 13.5px; --t-15: 15px; --t-17: 17px; --t-20: 20px;
  --t-26: clamp(22px, 2.2vw, 26px);
  --t-34: clamp(26px, 3.2vw, 34px);
  --t-48: clamp(34px, 4.6vw, 48px);
  --t-68: clamp(42px, 6.4vw, 68px);
  --t-96: clamp(52px, 9vw, 104px);

  /* ---- Radii / spacing (app values) */
  --r-card: 24px; --r-tile: 14px; --r-pill: 999px; --r-sheet: 32px;
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1180px;
  --gap: 14px;

  /* ---- Unity colours (identical in every mode) */
  --brand: #1D5C4F;
  --sky: #5FA8D3;
  --sand: #E8C988;
  --rose: #B0475F;
  --positive: #4FC57E;
  --negative: #E07A62;

  /* ---- Spending categories (for the capture demos) */
  --cat-groceries: #6FB7A4; --cat-dining: #E0A368; --cat-transport: #5FA8D3;
  --cat-utilities: #C2A85F; --cat-housing: #9D7BD8; --cat-healthcare: #D98E9E;
  --cat-shopping: #E8A2C0; --cat-entertainment: #7C9AE0; --cat-subscriptions: #5FC2B0;
  --cat-income: #4A9D6E;

  /* ---- Ink + glass (the app's dark scheme) */
  --ink: rgba(255, 255, 255, 0.95);
  --ink-2: rgba(255, 255, 255, 0.66);
  --ink-3: rgba(255, 255, 255, 0.44);
  --ink-4: rgba(255, 255, 255, 0.22);
  --hair: rgba(255, 255, 255, 0.10);
  --glass-fill: rgba(255, 255, 255, 0.075);
  --glass-fill-2: rgba(255, 255, 255, 0.035);
  --glass-edge: rgba(255, 255, 255, 0.13);
  --glass-hi: rgba(255, 255, 255, 0.22);
  --scrim: rgba(3, 8, 10, 0.28);
  --on-accent: #0b0f10;

  /* ---- Motion: the app's spring feel, in cubic-bezier form */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.36, .44, 1);
  --ease-soft: cubic-bezier(.4, .1, .2, 1);
}

/* ---------------------------------------------------------------------------
   The ten mode palettes (deep / primary / bright / glow / signal + dark bg).
   --------------------------------------------------------------------------- */
[data-mode="spending"]    { --m-deep:#6E2A1E; --m-primary:#C24A33; --m-bright:#F0917A; --m-glow:#FFB89C; --m-signal:#D9A441; --m-bg1:#2A0F0A; --m-bg2:#3A1810; --m-bg3:#200B07; }
[data-mode="debt"]        { --m-deep:#14443B; --m-primary:#1D5C4F; --m-bright:#7FCBB6; --m-glow:#9FD8C5; --m-signal:#E0A368; --m-bg1:#0A1F1A; --m-bg2:#10342C; --m-bg3:#081814; }
[data-mode="investments"] { --m-deep:#211F4E; --m-primary:#4A41C2; --m-bright:#9D9CF5; --m-glow:#6FB0FF; --m-signal:#5FE0C2; --m-bg1:#100F26; --m-bg2:#18163A; --m-bg3:#0C0B1C; }
[data-mode="retirement"]  { --m-deep:#5E3A1C; --m-primary:#BE7A2C; --m-bright:#E9C277; --m-glow:#F0A98C; --m-signal:#D98E9E; --m-bg1:#261608; --m-bg2:#36210E; --m-bg3:#1C1006; }
[data-mode="health"]      { --m-deep:#4A2238; --m-primary:#B0475F; --m-bright:#E89DB1; --m-glow:#7FB3A0; --m-signal:#E0A368; --m-bg1:#1F0E18; --m-bg2:#2E1524; --m-bg3:#170A12; }
[data-mode="taxes"]       { --m-deep:#20283A; --m-primary:#4C5871; --m-bright:#9BA7C0; --m-glow:#D9A441; --m-signal:#D9A441; --m-bg1:#0E1118; --m-bg2:#161B28; --m-bg3:#0A0D13; }
[data-mode="home"]        { --m-deep:#2A4A1E; --m-primary:#4A7D33; --m-bright:#9FCB6E; --m-glow:#CDE89C; --m-signal:#D98A4E; --m-bg1:#112009; --m-bg2:#1A3010; --m-bg3:#0C1807; }
[data-mode="insurance"]   { --m-deep:#123A45; --m-primary:#1E6B7A; --m-bright:#6FC2CE; --m-glow:#9BD9E2; --m-signal:#E0A368; --m-bg1:#07191E; --m-bg2:#0E2A31; --m-bg3:#051216; }
[data-mode="credit"]      { --m-deep:#1E2A4A; --m-primary:#3457A8; --m-bright:#8FB0F0; --m-glow:#B0C8FF; --m-signal:#D9A441; --m-bg1:#0D1322; --m-bg2:#141C33; --m-bg3:#090F1A; }
[data-mode="estate"]      { --m-deep:#3A1030; --m-primary:#6E2452; --m-bright:#C080A8; --m-glow:#DCA9C8; --m-signal:#D9A441; --m-bg1:#190615; --m-bg2:#260A20; --m-bg3:#120410; }

/* Derived tokens are re-declared wherever a mode is set, so a nested
   data-mode section resolves its own accent (custom properties resolve where
   they are declared, not where they are used). */
:root, [data-mode] {
  --accent: var(--m-bright);
  --accent-deep: var(--m-deep);
  --accent-mid: var(--m-primary);
  --glow: var(--m-glow);
  --signal: var(--m-signal);
  --bg1: var(--m-bg1); --bg2: var(--m-bg2); --bg3: var(--m-bg3);
  --accent-soft: color-mix(in srgb, var(--m-bright) 16%, transparent);
  --accent-line: color-mix(in srgb, var(--m-bright) 38%, transparent);
}

html[data-mode] {
  transition: --m-deep 1.1s var(--ease-soft), --m-primary 1.1s var(--ease-soft),
    --m-bright 1.1s var(--ease-soft), --m-glow 1.1s var(--ease-soft),
    --m-signal 1.1s var(--ease-soft), --m-bg1 1.1s var(--ease-soft),
    --m-bg2 1.1s var(--ease-soft), --m-bg3 1.1s var(--ease-soft);
}