/* ============================================================================
   Debt Tracker — web design tokens
   Source of truth for the marketing site. Every color, type, spacing, radius,
   and motion value lives here as a CSS custom property. Component CSS (site.css)
   must reference these tokens only — no raw hex outside this file and themes.css.

   Money semantics are LOAD-BEARING and must never be swapped:
     --positive  sage green  = money owed TO you / a cleared balance
     --negative  warm clay   = money YOU owe
     --brand     brand clay  = links, actions, the mark (NOT a money state)

   Default palette is the app's flagship light theme "Paper". Dark mode is the
   app's "Midnight". The 18-theme recolor lives in themes.css, scoped to a
   sample panel; it never restyles the page.
   ============================================================================ */

:root {
  /* ---- Paper (light, default) -------------------------------------------- */
  --bg: #fbfaf6; /* warm paper page background */
  --surface: #ffffff; /* cards, raised surfaces */
  --surface-variant: #f3f0e8; /* subtle fills */
  --surface-container: #f7f4ed; /* card container */
  --on-surface: #1c1a17; /* primary text (warm near-black) */
  --on-surface-variant: #5a554d; /* secondary text */
  --outline: #e2ddd2; /* borders */
  --divider: #ede8dd; /* hairlines */

  /* Brand / action clay. The web standardizes on the brighter #C96442 for the
     mark, button fills, and large accents. Inline body links use --link (the
     darker in-app clay) so link text clears WCAG AA 4.5:1 on paper. */
  --brand: #c96442;
  --brand-strong: #a84e30; /* in-app Paper primary; pressed/hover on light */
  --link: #a84e30; /* inline link text — AA at body size */
  --on-brand: #ffffff; /* text on a clay fill */
  --accent-container: #f8e2d7; /* tinted accent surface */
  --on-accent-container: #5c1f0e;

  /* Money — positive = owed to you (sage) */
  --positive: #4a7560;
  --positive-container: #dfebe3;
  --on-positive-container: #234c3b;

  /* Money — negative = you owe (clay) */
  --negative: #b04a2f;
  --negative-container: #f4dbd0;
  --on-negative-container: #5e2114;

  --error: #b3261e;

  /* Decorative avatar tints for person badges. Deliberately all cool tones —
     never green, clay, or brand — so a badge can never be misread as a money
     state. Same values in light and dark (mid-lightness reads on both). */
  --avatar-0: #5a86b0;
  --avatar-1: #6f6bc0;
  --avatar-2: #9161b0;
  --avatar-3: #b25a97;
  --avatar-4: #4f8f97;
  --avatar-5: #7a8aa5;
  --avatar-6: #8a67b8;
  --avatar-7: #5f7bbf;

  /* ---- Elevation (restrained: two levels; soft, warm) -------------------- */
  --shadow-1: 0 1px 2px rgba(28, 26, 23, 0.04), 0 2px 8px rgba(28, 26, 23, 0.05);
  --shadow-2: 0 2px 4px rgba(28, 26, 23, 0.06), 0 10px 28px rgba(28, 26, 23, 0.09);

  /* Faint clay glow behind the hero, echoing the feature graphic */
  --hero-glow: radial-gradient(
    120% 90% at 78% 8%,
    rgba(201, 100, 66, 0.12),
    rgba(201, 100, 66, 0) 60%
  );

  /* ---- Type families ----------------------------------------------------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "SFMono-Regular", Menlo,
    Consolas, monospace;

  /* ---- Type scale (app ratios kept; fluid display added for the web) ----- */
  --fs-hero: clamp(2.75rem, 1.6rem + 5.75vw, 6rem); /* 44 → 96, Fraunces */
  --fs-display: clamp(2rem, 1.35rem + 3.25vw, 3.25rem); /* 32 → 52, Fraunces */
  --fs-headline-lg: clamp(1.5rem, 1.15rem + 1.75vw, 1.9rem); /* ~24 → 30 */
  --fs-headline: clamp(1.3rem, 1.1rem + 1vw, 1.5rem); /* ~21 → 24 */
  --fs-title-lg: 1.0625rem; /* 17 */
  --fs-title: 0.9375rem; /* 15 */
  --fs-body-lg: 1.0625rem; /* 17 — web body a touch larger than the phone's 16 */
  --fs-body: 0.9375rem; /* 15 */
  --fs-label: 0.6875rem; /* 11, UPPERCASE eyebrow */
  --fs-mono: 0.8125rem; /* 13 — money figures */

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.55;
  --tracking-display: -0.02em;
  --tracking-headline: -0.01em;
  --tracking-label: 0.1em;

  /* ---- Spacing (base grid 4; app scale + web-scale section spacers) ------ */
  --space-0: 0;
  --space-2: 0.125rem;
  --space-4: 0.25rem;
  --space-6: 0.375rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-96: 6rem; /* web section rhythm (extends the app scale in kind) */
  --space-128: 8rem;

  /* ---- Radius (buttons + FAB are fully pill) ----------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Motion ------------------------------------------------------------ */
  --motion-fast: 120ms;
  --motion-standard: 240ms;
  --motion-expressive: 360ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-standard: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-expressive: cubic-bezier(0.2, 0, 0, 1.4);

  /* ---- Layout ------------------------------------------------------------ */
  --content-max: 1120px;
  --prose-max: 680px;
  --z-header: 100;
  --header-h: 60px;

  color-scheme: light;
}

/* ============================================================================
   Midnight (dark). Applied when the OS prefers dark and the user hasn't forced
   light, or when the toggle sets data-mode="dark". Only token values change.
   ============================================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --bg: #14130f;
    --surface: #1f1d18;
    --surface-variant: #272520;
    --surface-container: #26241f;
    --on-surface: #f0ece1;
    --on-surface-variant: #a8a297;
    --outline: #332f27;
    --divider: #2a2620;

    --brand: #e58062;
    --brand-strong: #e58062;
    --link: #e58062;
    --on-brand: #2a130a;
    --accent-container: #3d1f12;
    --on-accent-container: #fcdccb;

    --positive: #7fb89a;
    --positive-container: #22302a;
    --on-positive-container: #a9d6bf;

    --negative: #d97b5a;
    --negative-container: #3a241c;
    --on-negative-container: #f3c3ae;

    --error: #f2b8b5;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.45);
    --hero-glow: radial-gradient(
      120% 90% at 78% 8%,
      rgba(229, 128, 98, 0.14),
      rgba(229, 128, 98, 0) 60%
    );

    color-scheme: dark;
  }
}

/* Manual toggle wins in both directions (mirrors the media block for dark). */
:root[data-mode="dark"] {
  --bg: #14130f;
  --surface: #1f1d18;
  --surface-variant: #272520;
  --surface-container: #26241f;
  --on-surface: #f0ece1;
  --on-surface-variant: #a8a297;
  --outline: #332f27;
  --divider: #2a2620;

  --brand: #e58062;
  --brand-strong: #e58062;
  --link: #e58062;
  --on-brand: #2a130a;
  --accent-container: #3d1f12;
  --on-accent-container: #fcdccb;

  --positive: #7fb89a;
  --positive-container: #22302a;
  --on-positive-container: #a9d6bf;

  --negative: #d97b5a;
  --negative-container: #3a241c;
  --on-negative-container: #f3c3ae;

  --error: #f2b8b5;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.45);
  --hero-glow: radial-gradient(
    120% 90% at 78% 8%,
    rgba(229, 128, 98, 0.14),
    rgba(229, 128, 98, 0) 60%
  );

  color-scheme: dark;
}