/* ==========================================================================
   Alex & Jordi — wedding planner design tokens
   Load fonts once in <head>:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=DM+Sans:wght@400;500;600;700&display=swap">
   Theme: follows the OS by default. Force with <html data-theme="light|dark">.
   ========================================================================== */

:root {
  /* ---- Wedding palette (primitives — never use directly in components) ---- */
  --palette-ivory: #F3EDE1;
  --palette-forest: #3B4338;
  --palette-sage: #B0BEA7;
  --palette-lilac: #D0C3D4;
  --palette-aubergine: #291530;

  /* ---- Typography ---- */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --numeric: lining-nums tabular-nums;

  /* size / line-height (mobile first; desktop overrides below) */
  --text-display: 2.5rem;    --lh-display: 1.1;   /* 40/44  totals, tile numbers */
  --text-title-1: 2rem;      --lh-title-1: 1.12;  /* 32/36  page titles          */
  --text-title-2: 1.5rem;    --lh-title-2: 1.17;  /* 24/28  section headings     */
  --text-title-3: 1.25rem;   --lh-title-3: 1.3;   /* 20/26  card titles          */
  --text-body-lg: 1.125rem;  --lh-body-lg: 1.55;  /* 18/28                        */
  --text-body: 1rem;         --lh-body: 1.5;      /* 16/24  default, inputs       */
  --text-body-sm: 0.875rem;  --lh-body-sm: 1.43;  /* 14/20  tables, meta          */
  --text-label: 0.8125rem;   --lh-label: 1.25;    /* 13/16  CAPS labels           */
  --text-caption: 0.75rem;   --lh-caption: 1.33;  /* 12/16  ticks, timestamps     */
  --tracking-label: 0.08em;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;

  /* ---- Spacing (4px base) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-18: 72px;

  /* ---- Radius ---- */
  --radius-xs: 6px;   /* checkbox, swatch chip */
  --radius-sm: 8px;   /* bars, small tags      */
  --radius-md: 12px;  /* buttons, inputs, tiles*/
  --radius-lg: 16px;  /* cards                 */
  --radius-xl: 24px;  /* sheets, drawers       */
  --radius-pill: 999px;

  /* ---- Sizing ---- */
  --target-min: 44px;
  --control-h: 48px;
  --control-h-sm: 40px;
  --tabbar-h: 64px;
  --sidebar-w: 248px;
  --content-max: 1120px;

  /* ---- Motion ---- */
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 280ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* ---- Layers ---- */
  --z-sticky: 10; --z-drawer: 40; --z-toast: 50;

  /* ======================= LIGHT (default) ======================= */
  color-scheme: light;
  --color-bg: #F3EDE1;
  --color-surface: #FFFCF6;
  --color-surface-raised: #F7F2E8;   /* hover fill */
  --color-surface-sunk: #EAE3D4;     /* wells, table head, segmented track */
  --color-input-bg: #FFFCF6;
  --color-border: #DDD4C2;           /* decorative lines */
  --color-border-strong: #8D8574;    /* input + checkbox outlines (3.6:1) */

  --color-text-heading: #291530;     /* 16.5:1 on surface */
  --color-text: #3B4338;             /* 10.0:1 on surface */
  --color-text-muted: #5E655A;       /*  5.9:1 on surface, 4.7:1 on sunk */
  --color-accent: #6B4F73;           /* links, ampersand  */

  --color-primary: #3B4338;
  --color-primary-hover: #2F362D;
  --color-on-primary: #F3EDE1;

  --color-sage-soft: #E2E8DC;  --color-on-sage: #3B4338;
  --color-lilac-soft: #ECE4EE; --color-on-lilac: #291530;
  --color-focus: #291530;

  --color-done-bg: #DCE6D4;    --color-done-fg: #2F4A2C;
  --color-soon-bg: #F2E4C6;    --color-soon-fg: #6A4A12;
  --color-overdue-bg: #F2D9D3; --color-overdue-fg: #7C2D2A;
  --color-todo-bg: #EAE3D4;    --color-todo-fg: #3B4338;

  --chart-ceremony: #9DB08F;      --chart-ceremony-ink: #291530;
  --chart-post-ceremony: #DCC48E; --chart-post-ceremony-ink: #291530;
  --chart-reception: #6E5680;     --chart-reception-ink: #F3EDE1;
  --chart-late-night: #34405F;    --chart-late-night-ink: #F3EDE1;
  --chart-drinks: #3B4338;
  --chart-bar-tab: #8D8574;       /* dashed outline */
  --chart-grid: rgba(41, 21, 48, .07);

  --avatar-alex: #B0BEA7; --avatar-jordi: #D0C3D4; --avatar-alex-mum: #E6D5AE; --avatar-jordi-mum: #C9D0E0;
  --avatar-ink: #291530;

  --motif-stem: #3B4338; --motif-raceme: #8C739B;
  --skeleton: #EAE3D4; --skeleton-2: #F1EBDF;

  --toast-bg: #291530; --toast-fg: #F3EDE1; --toast-action-bg: #D0C3D4; --toast-action-fg: #291530;
  --scrim: rgba(41, 21, 48, .36);

  --shadow-sm: 0 1px 2px rgba(41, 21, 48, .06);
  --shadow-md: 0 1px 2px rgba(41, 21, 48, .06), 0 6px 20px rgba(41, 21, 48, .07);
  --shadow-lg: 0 12px 40px rgba(41, 21, 48, .18);
}

/* ============================ DARK ============================
   Same values twice: once for "follow the OS", once for a forced choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #291530;
    --color-surface: #35213C;
    --color-surface-raised: #422D4A;
    --color-surface-sunk: #21102A;
    --color-input-bg: #2E1A35;
    --color-border: #4F3A57;
    --color-border-strong: #8A7891;
    --color-text-heading: #F3EDE1;
    --color-text: #EDE6DA;
    --color-text-muted: #C4B8C8;
    --color-accent: #D0C3D4;
    --color-primary: #B0BEA7;
    --color-primary-hover: #C2CEBA;
    --color-on-primary: #291530;
    --color-sage-soft: #34413A;  --color-on-sage: #C9D6C0;
    --color-lilac-soft: #4C3556; --color-on-lilac: #E2CFE6;
    --color-focus: #D0C3D4;
    --color-done-bg: #2E3D30;    --color-done-fg: #C3DBB6;
    --color-soon-bg: #4A3A1F;    --color-soon-fg: #EDD39C;
    --color-overdue-bg: #542631; --color-overdue-fg: #F2B8B4;
    --color-todo-bg: #21102A;    --color-todo-fg: #EDE6DA;
    --chart-ceremony: #A3B696;      --chart-ceremony-ink: #291530;
    --chart-post-ceremony: #E3CB92; --chart-post-ceremony-ink: #291530;
    --chart-reception: #BFA6CF;     --chart-reception-ink: #291530;
    --chart-late-night: #7C8DC0;    --chart-late-night-ink: #291530;
    --chart-drinks: #B0BEA7;
    --chart-bar-tab: #8A7891;
    --chart-grid: rgba(243, 237, 225, .07);
    --motif-stem: #B0BEA7; --motif-raceme: #D0C3D4;
    --skeleton: #4A3552; --skeleton-2: #3F2B47;
    --toast-bg: #F3EDE1; --toast-fg: #291530; --toast-action-bg: #3B4338; --toast-action-fg: #F3EDE1;
    --scrim: rgba(10, 4, 14, .6);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .22);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #291530;
  --color-surface: #35213C;
  --color-surface-raised: #422D4A;
  --color-surface-sunk: #21102A;
  --color-input-bg: #2E1A35;
  --color-border: #4F3A57;
  --color-border-strong: #8A7891;
  --color-text-heading: #F3EDE1;
  --color-text: #EDE6DA;
  --color-text-muted: #C4B8C8;
  --color-accent: #D0C3D4;
  --color-primary: #B0BEA7;
  --color-primary-hover: #C2CEBA;
  --color-on-primary: #291530;
  --color-sage-soft: #34413A;  --color-on-sage: #C9D6C0;
  --color-lilac-soft: #4C3556; --color-on-lilac: #E2CFE6;
  --color-focus: #D0C3D4;
  --color-done-bg: #2E3D30;    --color-done-fg: #C3DBB6;
  --color-soon-bg: #4A3A1F;    --color-soon-fg: #EDD39C;
  --color-overdue-bg: #542631; --color-overdue-fg: #F2B8B4;
  --color-todo-bg: #21102A;    --color-todo-fg: #EDE6DA;
  --chart-ceremony: #A3B696;      --chart-ceremony-ink: #291530;
  --chart-post-ceremony: #E3CB92; --chart-post-ceremony-ink: #291530;
  --chart-reception: #BFA6CF;     --chart-reception-ink: #291530;
  --chart-late-night: #7C8DC0;    --chart-late-night-ink: #291530;
  --chart-drinks: #B0BEA7;
  --chart-bar-tab: #8A7891;
  --chart-grid: rgba(243, 237, 225, .07);
  --motif-stem: #B0BEA7; --motif-raceme: #D0C3D4;
  --skeleton: #4A3552; --skeleton-2: #3F2B47;
  --toast-bg: #F3EDE1; --toast-fg: #291530; --toast-action-bg: #3B4338; --toast-action-fg: #F3EDE1;
  --scrim: rgba(10, 4, 14, .6);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .22);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .45);
}

/* ---- Desktop type step-up ---- */
@media (min-width: 1024px) {
  :root {
    --text-display: 3rem;     --lh-display: 1.08;  /* 48/52 */
    --text-title-1: 2.5rem;   --lh-title-1: 1.1;   /* 40/44 */
    --text-title-2: 1.75rem;  --lh-title-2: 1.15;  /* 28/32 */
    --text-title-3: 1.375rem; --lh-title-3: 1.27;  /* 22/28 */
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}