/* ==========================================================================
   ADHD Money Compass — Design Tokens
   Warm Editorial Tech. Light is default; dark set via [data-theme="dark"].
   JS resolves "system" preference to light|dark and stamps data-theme.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Core palette ------------------------------------------------------ */
  --bg:        #F5F0E8;   /* Warm Stone — app background, never pure white  */
  --surface:   #FFFCF7;   /* Soft Ivory — primary cards                     */
  --surface-2: #EEE7DC;   /* secondary surface, wells, chips                */
  --ink:       #27312C;   /* Deep Ink — primary text                        */
  --ink-2:     #5C655F;   /* secondary text — AA: 5.32 on bg, 4.91 on surface-2 */
  --sage:      #6F8C79;   /* accent for charts/graphics ONLY (3.6:1 — never body text) */
  --sage-deep: #5D7867;   /* accent as text/active-tab tint — 4.72 on surface */
  --sage-soft: #E4EAE4;   /* tinted fills behind sage content               */
  --blue:      #829EAF;   /* dusty blue — informational                     */
  --blue-soft: #E6ECEF;
  --apricot:   #D4A07E;   /* warm highlight                                 */
  --apricot-soft: #F4E4D6;
  --amber:     #C28A45;   /* soft amber — caution                           */
  --amber-soft: #F1E4CF;
  --red:       #B7605D;   /* ONLY overdue / invalid / genuine risk (large text & graphics) */
  --red-text:  #9E4844;   /* red for NORMAL-SIZE text (errors) — 5.34 on bg, 5.92 on surface */
  --red-soft:  #F0DEDC;
  --border:    rgba(39, 49, 44, 0.10);
  --border-strong: rgba(39, 49, 44, 0.18);

  /* --- Semantic ----------------------------------------------------------- */
  --text: var(--ink);
  --text-2: var(--ink-2);
  --accent: var(--sage);
  --accent-contrast: #FFFCF7;      /* text on primary buttons */
  --btn-bg: #5D7867;               /* primary button — 4.72:1 with ivory text */
  --btn-bg-hover: #4A6153;         /* hover/pressed — 6.56:1 with ivory text  */
  --link: #4E6757;                 /* links — 5.44 on bg, 6.03 on surface     */
  --focus-ring: #4E6B5C;
  --hero-grad: linear-gradient(135deg, #FFFCF7 0%, #F6EFE3 100%);
  --nav-active-bg: var(--sage-soft);
  --scrim: rgba(39, 49, 44, 0.38);

  /* --- Elevation ---------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(39, 49, 44, 0.05), 0 2px 8px rgba(39, 49, 44, 0.05);
  --shadow-2: 0 2px 4px rgba(39, 49, 44, 0.06), 0 8px 24px rgba(39, 49, 44, 0.08);

  /* --- Shape -------------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* --- Space (4px base) --------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px;

  /* --- Type --------------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  /* Editorial serif: ONLY large figures, hero headings, milestone numbers */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino,
                "Book Antiqua", Georgia, "Times New Roman", serif;

  --fs-xs: 0.75rem;    /* 12 — fine print, uppercase labels */
  --fs-sm: 0.875rem;   /* 14 — secondary UI                 */
  --fs-md: 1rem;       /* 16 — body                         */
  --fs-lg: 1.125rem;   /* 18 — card titles                  */
  --fs-xl: 1.5rem;     /* 24 — section headings             */
  --fs-2xl: 2rem;      /* 32 — page headings                */
  --fs-hero: clamp(2.6rem, 6vw, 3.6rem); /* hero money figure */

  /* --- Layout ------------------------------------------------------------- */
  --content-max: 1280px;
  --sidebar-w: 232px;
  --touch: 44px;

  /* --- Motion ------------------------------------------------------------- */
  --t-fast: 140ms ease;
  --t-med: 240ms cubic-bezier(.2, .7, .3, 1);
}

/* ==========================================================================
   Warm dark theme — warm charcoal & deep olive, never pure black.
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #211F1B;   /* warm charcoal                                  */
  --surface:   #2A2925;   /* raised card                                    */
  --surface-2: #34322C;   /* wells, chips                                   */
  --ink:       #ECE7DD;
  --ink-2:     #A8ACA4;
  --sage:      #8FAE9B;
  --sage-deep: #A3BFAE;
  --sage-soft: #38423B;
  --blue:      #93AEBF;
  --blue-soft: #333C42;
  --apricot:   #D9AA88;
  --apricot-soft: #453A31;
  --amber:     #D2A265;
  --amber-soft: #46392A;
  --red:       #CC7C78;
  --red-text:  #CC7C78;   /* 5.27 on dark bg, 4.66 on dark surface */
  --red-soft:  #47322F;
  --border:    rgba(236, 231, 221, 0.10);
  --border-strong: rgba(236, 231, 221, 0.20);

  --accent-contrast: #1E241F;
  --btn-bg: #8FAE9B;               /* 6.55:1 with dark contrast text */
  --btn-bg-hover: #A3BFAE;         /* 8.00:1 with dark contrast text */
  --link: #A3BFAE;                 /* 8.32 on dark bg                */
  --focus-ring: #A9C6B4;
  --hero-grad: linear-gradient(135deg, #2C2B26 0%, #2E3129 100%);
  --nav-active-bg: var(--sage-soft);
  --scrim: rgba(12, 12, 10, 0.55);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.22);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.28), 0 10px 28px rgba(0, 0, 0, 0.32);
}