/* ChristmasHQ 2 design tokens — "Heirloom" style (Phase 1, chosen 2026-10-02).
   Three themes, each a full set of values, picked in Settings → Theme:
     :root                       Heirloom       — warm stationery, cranberry, pine, gold foil
     html[data-theme="dark"]     Heirloom Dark  — the same, by candlelight
     html[data-theme="nordic"]   Nordic Frost   — snowy night, lingonberry, fjord blue
   Components must only use these variables, never raw colours, so every
   theme stays consistent. After changing any colour, run
   `python .claude/check-contrast.py` — every pair must pass WCAG AA.
*/

:root {
  /* --- Surfaces + text ---------------------------------------------------- */
  --bg: #F7F1E6;            /* Parchment */
  --card: #FFFDF8;          /* Warm white card */
  --card-2: #FBF5EA;        /* Inset surface (inputs, inactive chips) */
  --text-primary: #2A2320;  /* Ink */
  --text-secondary: #66584D;/* Walnut */
  --border: #E8DCC8;        /* Linen */
  --track: #F0E6D5;         /* Empty part of bars and rings */

  /* --- Brand colours ------------------------------------------------------ */
  --primary: #9B2A2F;       /* Cranberry — buttons */
  --primary-hover: #84232A;
  --on-primary: #FFF8F0;    /* Text/icons on --primary */
  --primary-text: #9B2A2F;  /* Cranberry as inline text */
  --primary-soft: #F7E2DF;
  --secondary: #1E4A3C;     /* Pine — links, active nav, ticks */
  --on-secondary: #FFF8F0;
  --secondary-soft: #E0ECE4;
  --accent: #B48434;        /* Gold foil — decoration and icons only */
  --accent-muted: #EADBB8;
  --eyebrow: #86601F;       /* Small gold capitals above headings */
  --success: #2E6B55;

  /* Calm accents for advisory states. Never harsh red alerts. */
  --warn-bg: #FBEFD8;
  --warn-border: #E0BE7C;
  --warn-text: #6B4F18;

  /* --- Category colours (icon chips, bars) -------------------------------- */
  --cat-gold: #8A6420;   --cat-gold-soft: #F5E9CC;
  --cat-berry: #9B2A2F;  --cat-berry-soft: #F7E2DF;
  --cat-pine: #1E4A3C;   --cat-pine-soft: #E0ECE4;
  --cat-plum: #6A3A5A;   --cat-plum-soft: #EFE2EB;
  --cat-frost: #2F5F8A;  --cat-frost-soft: #E2ECF5;

  /* --- Charts: each ≥3:1 against --card, distinct in hue ------------------ */
  --chart-planned: #A0742A; /* Antique gold */
  --chart-spent: #2E6B55;   /* Pine */
  --chart-wrapped: #9B2A2F; /* Cranberry */
  --chart-4: #6A3A5A;       /* Plum */
  --chart-5: #3F72A0;       /* Winter blue */

  /* --- Dashboard hero ------------------------------------------------------ */
  --hero-top: #FFFBF2;
  --hero-bottom: #F8EEDB;
  --hero-ink: #2A2320;
  --hero-ink-2: #66584D;
  --hero-eyebrow: #86601F;
  --hero-num: #9B2A2F;
  --hero-foil: rgba(180, 132, 52, 0.38);
  --snow: #FFFFFF;
  --snow-glow: 0 0 0 1px rgba(170, 135, 90, 0.28), 0 1px 3px rgba(120, 90, 50, 0.22);

  /* --- Navigation ---------------------------------------------------------- */
  --nav-bg: rgba(255, 252, 245, 0.94);
  --nav-active-fg: #9B2A2F;
  --nav-active-bg: #F7E2DF;
  --overlay: rgba(28, 20, 14, 0.45);

  /* Tinted status pills (background, border) */
  --tone-success-bg: #E3EFE8;  --tone-success-border: #B9D5C5;
  --tone-info-bg: #E0ECE4;     --tone-info-border: #B5CFC1;
  --tone-primary-bg: #F7E2DF;  --tone-primary-border: #E7B9B4;
  --tone-gold-bg: #F5E9CC;     --tone-gold-border: #E2C98E;

  /* --- Brand: Blush & Sage (only inside .brand-surface) ----------------- */
  --brand-bg: #FAF7F5;
  --brand-card: #FFFDFC;
  --brand-accent: #EFD6D2;
  --brand-accent-hover: #D8A7A0;
  --brand-secondary: #BFCABF;
  --brand-text: #7A5E59;

  /* --- Typography ---------------------------------------------------------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-numeral: "Fraunces", Georgia, serif;
  --display-weight: 600;
  --display-tracking: -0.01em;

  /* Body never under 16px, secondary never under 14px. */
  --text-xs: 13px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 22px;
  --text-xl: 28px;
  --text-2xl: 36px;
  --text-3xl: 48px;

  /* --- Spacing & radius ------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(70, 45, 20, 0.06);
  --shadow-md: 0 1px 2px rgba(70, 45, 20, 0.05), 0 8px 22px rgba(70, 45, 20, 0.08);
  --shadow-lg: 0 14px 36px rgba(70, 45, 20, 0.14);

  /* --- Layout ----------------------------------------------------------- */
  --sidebar-w: 280px;
  --sidebar-rail-w: 76px;
  --bottom-nav-h: 68px;
  --header-h: 56px;
  --content-max: 1040px;

  /* --- Motion ----------------------------------------------------------- */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 250ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  color-scheme: light;
}

/* Heirloom Dark — candlelit pine. Set on <html> so the theme-color meta and
   every component follow it. */
html[data-theme="dark"] {
  --bg: #141917;
  --card: #1D2420;
  --card-2: #232B27;
  --text-primary: #F6F0E4;
  --text-secondary: #CFC5B3;
  --border: #36433C;
  --track: #2E3933;

  --primary: #A8353C;
  --primary-hover: #922D33;
  --on-primary: #FFF8F0;
  --primary-text: #F2A3A3;
  --primary-soft: #3E2528;
  --secondary: #9ED3B8;
  --on-secondary: #14231C;
  --secondary-soft: #1F3A30;
  --accent: #D9B26A;
  --accent-muted: #4A4030;
  --eyebrow: #E0BD78;
  --success: #9ED3B8;

  --warn-bg: #2F2A1E;
  --warn-border: #8A6F2B;
  --warn-text: #ECD79B;

  --cat-gold: #E6C27A;   --cat-gold-soft: #3A3222;
  --cat-berry: #F2A3A3;  --cat-berry-soft: #3E2528;
  --cat-pine: #9ED3B8;   --cat-pine-soft: #1F3A30;
  --cat-plum: #DDB0D0;   --cat-plum-soft: #38283B;
  --cat-frost: #9CC3EA;  --cat-frost-soft: #22334A;

  --chart-planned: #D9B26A;
  --chart-spent: #8FC9AC;
  --chart-wrapped: #F08585;
  --chart-4: #D7A9CB;
  --chart-5: #8DB8E0;

  --hero-top: #222D27;
  --hero-bottom: #18201C;
  --hero-ink: #F6F0E4;
  --hero-ink-2: #CFC5B3;
  --hero-eyebrow: #E0BD78;
  --hero-num: #E6C27A;
  --hero-foil: rgba(217, 178, 106, 0.40);
  --snow: rgba(255, 255, 255, 0.70);
  --snow-glow: none;

  --nav-bg: rgba(29, 36, 32, 0.94);
  --nav-active-fg: #F2A3A3;
  --nav-active-bg: #3E2528;
  --overlay: rgba(0, 0, 0, 0.60);

  --tone-success-bg: #1F3A30;  --tone-success-border: #3D6A57;
  --tone-info-bg: #1F3A30;     --tone-info-border: #3D6A57;
  --tone-primary-bg: #3E2528;  --tone-primary-border: #74403F;
  --tone-gold-bg: #3A3222;     --tone-gold-border: #6E5A33;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 22px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

/* Nordic Frost — a quiet snowy night: cool blues, lingonberry, clean type. */
html[data-theme="nordic"] {
  --bg: #EDF2F7;
  --card: #FFFFFF;
  --card-2: #F4F7FB;
  --text-primary: #16243A;
  --text-secondary: #4A5A6E;
  --border: #D9E2EC;
  --track: #E3EBF3;

  --primary: #A8344B;
  --primary-hover: #8F2B40;
  --on-primary: #FFFFFF;
  --primary-text: #A8344B;
  --primary-soft: #F8E3E8;
  --secondary: #1F5E70;
  --on-secondary: #FFFFFF;
  --secondary-soft: #DCEFF1;
  --accent: #6E9CC8;
  --accent-muted: #CFE0EF;
  --eyebrow: #2F5F8A;
  --success: #2A6A5C;

  --warn-bg: #FBF1DC;
  --warn-border: #E0BE7C;
  --warn-text: #6B4F18;

  --cat-gold: #8A6420;   --cat-gold-soft: #F6EDD7;
  --cat-berry: #A8344B;  --cat-berry-soft: #F8E3E8;
  --cat-pine: #1F5E70;   --cat-pine-soft: #DCEFF1;
  --cat-plum: #5B4A8A;   --cat-plum-soft: #E8E4F4;
  --cat-frost: #2F5F8A;  --cat-frost-soft: #E1EBF6;

  --chart-planned: #A77A1F;
  --chart-spent: #1F5E70;
  --chart-wrapped: #A8344B;
  --chart-4: #5B4A8A;
  --chart-5: #4F86B7;

  --hero-top: #102039;
  --hero-bottom: #2F5079;
  --hero-ink: #FFFFFF;
  --hero-ink-2: #D7E6F5;
  --hero-eyebrow: #B9D3EC;
  --hero-num: #FFFFFF;
  --hero-foil: rgba(255, 255, 255, 0.16);
  --snow: rgba(255, 255, 255, 0.85);
  --snow-glow: none;

  --nav-bg: rgba(255, 255, 255, 0.94);
  --nav-active-fg: #1F5E70;
  --nav-active-bg: #DCEFF1;
  --overlay: rgba(10, 20, 35, 0.45);

  --tone-success-bg: #DFF0EA;  --tone-success-border: #AFD3C6;
  --tone-info-bg: #DCEFF1;     --tone-info-border: #A9D0D7;
  --tone-primary-bg: #F8E3E8;  --tone-primary-border: #E6B3BF;
  --tone-gold-bg: #F6EDD7;     --tone-gold-border: #E2C98E;

  --font-display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-numeral: "Outfit", system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.015em;

  --shadow-sm: 0 1px 2px rgba(22, 36, 58, 0.05);
  --shadow-md: 0 1px 2px rgba(22, 36, 58, 0.04), 0 10px 26px rgba(22, 36, 58, 0.07);
  --shadow-lg: 0 14px 36px rgba(22, 36, 58, 0.14);

  color-scheme: light;
}

/* Printing: every theme prints in Heirloom's light colours on white paper,
   so Dark and Nordic pages never print pale text on a white background. */
@media print {
  html[data-theme] {
    --bg: #FFFFFF;
    --card: #FFFFFF;
    --card-2: #FFFFFF;
    --text-primary: #1A1A1A;
    --text-secondary: #4A4A4A;
    --border: #BBBBBB;
    --track: #E6E6E6;
    --primary: #9B2A2F;
    --on-primary: #FFFFFF;
    --primary-text: #9B2A2F;
    --primary-soft: #F7E2DF;
    --secondary: #1E4A3C;
    --on-secondary: #FFFFFF;
    --accent: #B48434;
    --eyebrow: #6B4C18;
    --success: #2E6B55;
    --warn-bg: #FFFFFF;
    --warn-text: #6B4F18;
    --cat-gold: #8A6420;  --cat-gold-soft: #F5E9CC;
    --cat-berry: #9B2A2F; --cat-berry-soft: #F7E2DF;
    --cat-pine: #1E4A3C;  --cat-pine-soft: #E0ECE4;
    --cat-plum: #6A3A5A;  --cat-plum-soft: #EFE2EB;
    --cat-frost: #2F5F8A; --cat-frost-soft: #E2ECF5;
    --tone-success-bg: #FFFFFF; --tone-info-bg: #FFFFFF; --tone-primary-bg: #FFFFFF; --tone-gold-bg: #FFFFFF;
    --hero-top: #FFFFFF;
    --hero-bottom: #FFFFFF;
    --hero-ink: #1A1A1A;
    --hero-ink-2: #4A4A4A;
    --hero-eyebrow: #6B4C18;
    --hero-num: #9B2A2F;
    --chart-planned: #A0742A;
    --chart-spent: #2E6B55;
    --chart-wrapped: #9B2A2F;
    --chart-4: #6A3A5A;
    --chart-5: #3F72A0;
    color-scheme: light;
  }
}

/* Scoped brand surface — used inside Settings/About + the Luna footer mark.
   This is the ONLY place the Blush & Sage palette appears. */
.brand-surface {
  --bg: var(--brand-bg);
  --card: var(--brand-card);
  --primary: var(--brand-accent-hover);
  --secondary: var(--brand-secondary);
  --text-primary: var(--brand-text);
  --text-secondary: var(--brand-text);
  --border: var(--brand-accent);
}