/*
 * Arlene & Cory Wedding — Design Tokens
 * Source of truth: /theme-notes.md (§8 Quick-reference). Keep these in sync.
 * Exposed on :root as `--wc-*` custom properties. Consume via var(--wc-*).
 */

:root {
  /* ── Color: brand ───────────────────────────────────────── */
  --wc-sage:           #7c8a6b;
  --wc-sage-tint:      #a8b59a;
  --wc-sage-deep:      #5c6a4d;
  --wc-blush:          #d8b8b8;
  --wc-blush-deep:     #b88a8a;
  --wc-champagne:      #e8dcc0;
  --wc-champagne-deep: #c9b890;
  --wc-burgundy:       #7a2233;

  /* ── Color: neutrals ─────────────────────────────────────── */
  --wc-ivory:    #fbfaf7;
  --wc-cream:    #f4efe6;
  --wc-linen:    #ece5d8;
  --wc-stone:    #d8d2c5;
  --wc-taupe:    #a89f8e;
  --wc-slate:    #6b665b;
  --wc-ink:      #2f2c26;
  --wc-charcoal: #1d1b17;

  /* ── Color: functional ───────────────────────────────────── */
  --wc-success: #5c7a3d;
  --wc-error:   #a83232;
  --wc-warning: #c9a23a;
  --wc-info:    #5a8fb0;

  /* Body link color — AA-passing on light surfaces (use instead of --wc-sage for text links). */
  --wc-link:        var(--wc-sage-deep);
  --wc-link-hover:  var(--wc-sage);
  --wc-text:        var(--wc-ink);
  --wc-text-muted:  var(--wc-taupe);
  --wc-text-on-dark: var(--wc-ivory);

  /* ── Typography ──────────────────────────────────────────── */
  --font-display:        "Hadley Display", Georgia, "Times New Roman", serif;
  --font-display-script: "Hadley Script", Georgia, cursive;
  --font-body:           "Aleo Regular", Georgia, "Times New Roman", serif;
  --font-body-light:     "Aleo Light", Georgia, "Times New Roman", serif;
  --font-body-medium:    "Aleo Medium", Georgia, "Times New Roman", serif;
  --font-body-semibold:  "Aleo SemiBold", Georgia, "Times New Roman", serif;
  --font-body-bold:      "Aleo Bold", Georgia, "Times New Roman", serif;
  --font-icon:           "Font Awesome 6 Pro";

  /* Type scale (px) */
  --fs-caption: 14px;
  --fs-body:    16px;
  --fs-lg:      18px;
  --fs-xl:      20px;
  --fs-2xl:     24px;
  --fs-3xl:     28px;
  --fs-title:   clamp(22px, 2.5vw + 0.8rem, 32px);
  --fs-subhead: 40px;
  --fs-hero:    clamp(32px, 5vw + 1rem, 72px);
  --fs-names:   clamp(32px, 5vw + 1rem, 72px);
  --fs-monogram: 96px;

  --lh-body:    1.6;
  --lh-display: 1.2;
  --lh-tight:   1em;
  --lh-cell:    1.5;

  --tracking-display: -0.01em;
  --tracking-caption: 0.02em;
  --tracking-monogram: 0.04em;

  /* ── Layout ──────────────────────────────────────────────── */
  --max-content:          1200px;
  --max-content-wide:     1280px;   /* galleries, seating chart */
  --max-content-dashboard: 1440px;
  --max-prose:            680px;    /* long-form readability */

  --bp-phone:   600px;
  --bp-tablet:  768px;
  --bp-desktop: 1024px;
  --bp-wide:    1200px;

  --space-section:    80px;        /* desktop section rhythm */
  --space-section-sm: 32px;        /* mobile section rhythm */
  --space-card:       24px;
  --space-field-gap:  16px;
  --gutter:           24px;

  --z-base:   0;
  --z-card:   5;
  --z-tooltip: 10;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-header: 999;
  --z-modal:  9999;

  /* ── Radius ──────────────────────────────────────────────── */
  --r-pill:   999px;
  --r-input:  8px;
  --r-card:   8px;
  --r-panel:  16px;
  --r-circle: 50%;

  /* ── Shadow (warm, ink-tinted) ───────────────────────────── */
  --sh-card:       0 2px 8px rgba(47, 44, 38, .08);
  --sh-card-hover: 0 8px 24px rgba(47, 44, 38, .12);
  --sh-modal:      0 12px 40px rgba(47, 44, 38, .16);
  --sh-focus:      0 0 0 3px rgba(124, 138, 107, .5);
  --sh-focus-dark: 0 0 0 3px rgba(216, 184, 184, .5);
  --sh-input:      inset 0 1px 2px rgba(47, 44, 38, .06);
  --sh-none:       none;

  /* ── Motion ──────────────────────────────────────────────── */
  --ease:        ease-in-out;
  --ease-settle: cubic-bezier(.2, .7, .3, 1);
  --dur-fast:    150ms;
  --dur:         300ms;
  --dur-slow:    400ms;
  --dur-reveal:  800ms;

  /* ── Theme-aware component tokens (light defaults) ────────── */
  /* Dark theme overrides these via [data-theme="dark"] below. */
  --hero-scrim-top: rgba(244, 239, 230, 0.35);
  --hero-scrim-bottom: rgba(244, 239, 230, 0.85);
  --header-bg: rgba(251, 250, 247, 0.92);
  --card-bg: var(--wc-ivory);
  --input-bg: var(--wc-ivory);
  --countdown-bg: rgba(251, 250, 247, 0.7);
  --divider-color: var(--wc-stone);
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   0.01ms;
    --dur:        0.01ms;
    --dur-slow:   0.01ms;
    --dur-reveal: 0.01ms;
  }
}

/* ── Dark theme ───────────────────────────────────────────── */
/* Applied via [data-theme="dark"] on <html>. Overrides neutrals so
   all background-/text-based tokens flip to dark-mode equivalents.
   Brand accents (sage, blush, champagne, burgundy) stay unchanged;
   only neutrals and functional text colors are overridden. */
[data-theme="dark"] {
  --wc-ivory:    #1a1814;
  --wc-cream:    #221f1a;
  --wc-linen:    #312d27;
  --wc-stone:    #4a443c;
  --wc-taupe:    #a89e91;
  --wc-slate:    #b8aea1;
  --wc-ink:      #14110d;
  --wc-charcoal: #0c0a07;

  /* Lighten sage-deep so it's legible as text on dark backgrounds.
     Used for section-eyebrows, hero dates, countdown numbers, monograms,
     timeline times, button borders/labels. */
  --wc-sage:           #8d9a7b;
  --wc-sage-tint:      #b8c5a8;
  --wc-sage-deep:      #a8b59a;

  /* Lighten blush-deep for legibility on dark backgrounds (used as text
     accent for ampersands, divider marks, person roles - not button bg). */
  --wc-blush-deep:     #d8a8a8;

  --wc-text:        #ede8df;
  --wc-text-muted:  #a89e91;
  --wc-text-on-dark: #ede8df;

  --wc-link:        var(--wc-sage-tint);
  --wc-link-hover:  var(--wc-sage);

  /* Hero scrim: dark gradient instead of light */
  --hero-scrim-top: rgba(20, 17, 13, 0.35);
  --hero-scrim-bottom: rgba(20, 17, 13, 0.82);

  /* Header background: dark translucent */
  --header-bg: rgba(26, 24, 20, 0.92);

  /* Card backgrounds: dark translucent */
  --card-bg: rgba(34, 31, 26, 0.6);

  /* Form input background */
  --input-bg: #2a2722;

  /* Countdown unit background */
  --countdown-bg: rgba(26, 24, 20, 0.7);

  /* Divider lines: lighter on dark */
  --divider-color: #4a443c;
}

/* ── Reduced motion ───────────────────────────────────────── */