/* ==========================================================================
   19th Annual Robert Burns Supper — design tokens

   The palette is sampled directly from the 2027 flyer artwork in /samples:
   the parchment ground, the navy of the "Limited Space" banner, the gold of
   the oval portrait frame, and the blues/greens of the tartan corners.

   Rule of the page: parchment and navy carry it; gold punctuates. Tartan is
   a border treatment, never a field behind text.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- Ground: parchment ---------------------------------------------------- */
  --parchment: #f4eedf;
  --parchment-deep: #eae0c9;
  --parchment-edge: #d9cba9;
  --cream: #fbf7ee;

  /* --- Ink: the flyer's navy ------------------------------------------------- */
  --navy: #14243c;
  --navy-deep: #0c1728;
  --navy-soft: #2a3d5c;

  /* --- Gold: the portrait frame ---------------------------------------------- */
  --gold: #c2a24e;
  --gold-bright: #d9bc6a;
  --gold-ink: #7f6116; /* darkened for AA body text on parchment */

  /* --- Tartan accents (from the sett in the flyer corners) ------------------- */
  --loch: #47677a;
  --loch-ink: #2f4a5a;
  --heather: #6b4e71;
  --highland-green: #2f6350;
  --tartan-red: #9b2226;
  --tartan-red-ink: #7a1518;

  /* --- Neutral text ---------------------------------------------------------- */
  --ink: #1b1a16;
  --ink-soft: #443f34;
  --ink-muted: #6a6153;

  /* --- Semantic roles -------------------------------------------------------- */
  --bg: var(--parchment);
  --bg-alt: var(--parchment-deep);
  --surface: var(--cream);
  --surface-raised: #fffdf7;
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --text-muted: var(--ink-muted);
  --heading: var(--navy);
  --accent: var(--gold);
  --accent-ink: var(--gold-ink);
  --link: var(--loch-ink);
  --rule: color-mix(in srgb, var(--navy) 16%, transparent);
  --rule-strong: color-mix(in srgb, var(--navy) 30%, transparent);

  /* --- Type ------------------------------------------------------------------ */
  /* Display: Cinzel — the classical Roman capital already used on the flyer
     and cut into the Cathedral's own facade.
     Head/verse: EB Garamond — an 18th-century face, contemporary with Burns.
     Body: Source Sans 3 — long-form event copy has to stay readable. */
  --font-display: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
  --font-head: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body:
    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;

  /* Fluid scale, 320px → 1280px */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-xl: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem);
  --fs-3xl: clamp(2.25rem, 1.7rem + 2.6vw, 3.5rem);
  --fs-hero: clamp(2.25rem, 1.45rem + 3.9vw, 4.75rem);

  --lh-tight: 1.08;
  --lh-head: 1.18;
  --lh-body: 1.65;

  /* --- Space (8px base) ------------------------------------------------------ */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --section-y: clamp(3.5rem, 8vw, 7rem);

  /* --- Structure -------------------------------------------------------------- */
  --measure: 62ch;
  --container: 1120px;
  --container-narrow: 760px;

  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgb(20 36 60 / 0.08), 0 2px 6px rgb(20 36 60 / 0.06);
  --shadow: 0 2px 4px rgb(20 36 60 / 0.08), 0 8px 22px rgb(20 36 60 / 0.11);
  --shadow-lg: 0 4px 10px rgb(20 36 60 / 0.12), 0 20px 48px rgb(20 36 60 / 0.16);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 220ms;

  /* --- Tartan ----------------------------------------------------------------- */
  /* One shared sett, drawn in CSS so there is no image request and no
     licensing question about a registered tartan photograph. Used only as a
     band or a border — never as a field behind running text. */
  --tartan-a: #16305a;
  --tartan-b: #2f6350;
  --tartan-c: #47677a;
  --tartan-d: #8d2b2f;
  --tartan-line: #d8d2c4;
}

/* --- Dark mode: the same night, seen from the other side of the room -------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #10192a;
    --bg-alt: #16243a;
    --surface: #1a2939;
    --surface-raised: #21324a;
    --text: #f0e9d8;
    --text-soft: #d5cdba;
    --text-muted: #a49a85;
    --heading: #f4e9cd;
    --accent: var(--gold-bright);
    --accent-ink: var(--gold-bright);
    --link: #9fc2d6;
    --rule: color-mix(in srgb, var(--gold-bright) 22%, transparent);
    --rule-strong: color-mix(in srgb, var(--gold-bright) 38%, transparent);
    --parchment-edge: #3a4a63;
    --tartan-line: #e2dccc;
  }
}

:root[data-theme="dark"] {
  --bg: #10192a;
  --bg-alt: #16243a;
  --surface: #1a2939;
  --surface-raised: #21324a;
  --text: #f0e9d8;
  --text-soft: #d5cdba;
  --text-muted: #a49a85;
  --heading: #f4e9cd;
  --accent: var(--gold-bright);
  --accent-ink: var(--gold-bright);
  --link: #9fc2d6;
  --rule: color-mix(in srgb, var(--gold-bright) 22%, transparent);
  --rule-strong: color-mix(in srgb, var(--gold-bright) 38%, transparent);
  --parchment-edge: #3a4a63;
  --tartan-line: #e2dccc;
}

/* Respect reduced-motion globally; components need not repeat this. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}