/*
  Clover Silver — design tokens

  Typography:  Syne 700/800 (display) + Source Serif 4 400 / italic (body), self-hosted in /assets/fonts
  Palette:     burgundy primary, gold accent, pine secondary on a warm off-white base
  Shape:       sharp corners, 1px rules, hard offset shadows
  Layout:      ruled 12-column mosaic with tiles of unequal span
  Motion:      staggered entrances, hero headline character reveal
  All colours, type sizes, spacing and easing live here; other stylesheets reference these variables.
*/

/* ───────────── Fonts (self-hosted, font-display: swap) ───────────── */
@font-face{font-family:'Syne';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/syne-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Syne';font-style:normal;font-weight:800;font-display:swap;
  src:url('/assets/fonts/syne-latin-800-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/source-serif-4-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;
  src:url('/assets/fonts/source-serif-4-latin-400-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* ───────────── Colour ─────────────
     Three hues: burgundy (primary), gold (accent), pine (secondary, used sparingly).
     Every other colour is a tint/shade of those or a warm neutral. */
  --brand-primary:#6b1d2e;
  --brand-primary-deep:#451120;   /* shade of primary: gradient depth */
  --brand-secondary:#2b4a42;      /* pine: unexpected complement, never a tint of burgundy */
  --brand-accent:#d6a53c;         /* gold: CTAs, active states, ornaments */
  --accent-ink:#7a5410;           /* gold darkened for TEXT on light surfaces (AA) */

  --surface-base:#f5f0e8;
  --surface-raised:#fbf8f1;
  --surface-sand:#ebe2d1;
  --surface-inverse:var(--brand-primary);
  --surface-ink:#1d1815;          /* footer */

  --text-primary:#1f1a17;
  --text-secondary:#5a4f47;
  --text-inverse:#f5f0e8;
  --text-inverse-muted:#d9c8c4;
  --text-on-ink-muted:#b8a99d;

  --border-subtle:rgb(31 26 23 / .22);
  --border-strong:#1f1a17;
  --rule-on-primary:rgb(214 165 60 / .6);
  --rule-on-ink:rgb(245 240 232 / .24);

  /* raw channels for alpha work elsewhere */
  --gold-rgb:214 165 60;
  --ink-rgb:31 26 23;
  --paper-rgb:245 240 232;
  --burgundy-rgb:107 29 46;

  /* atmosphere: gradient meshes (no flat fills everywhere) */
  --mesh-primary:
    radial-gradient(60% 70% at 88% 8%,  rgb(var(--gold-rgb) / .20), transparent 62%),
    radial-gradient(70% 90% at 0% 100%, var(--brand-primary-deep), transparent 72%),
    var(--brand-primary);
  --mesh-paper:
    radial-gradient(55% 40% at 100% 0%,  rgb(var(--gold-rgb) / .10), transparent 70%),
    radial-gradient(60% 50% at 0% 60%,   rgb(var(--burgundy-rgb) / .045), transparent 70%),
    var(--surface-base);
  --hatch-ruled:repeating-linear-gradient(to bottom, transparent 0 1.7rem, rgb(var(--ink-rgb) / .16) 1.7rem calc(1.7rem + 1px));

  /* ───────────── Typography ───────────── */
  --font-display:'Syne','Arial Black',sans-serif;
  --font-body:'Source Serif 4','Iowan Old Style',Georgia,serif;

  --text-hero:clamp(3.5rem, 10vw, 9rem);
  --text-h1:  clamp(2.5rem, 6vw,  5rem);
  --text-h2:  clamp(1.75rem, 4vw, 3rem);
  --text-h3:  clamp(1.25rem, 2.5vw, 1.75rem);
  --text-body:clamp(1rem, 1.5vw,   1.125rem);
  --text-sm:  clamp(0.75rem, 1vw,  0.875rem);

  --weight-body:400;
  --weight-display:800;

  /* ───────────── Space & layout ───────────── */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem;  --space-7:3rem;   --space-8:4rem; --space-9:6rem;

  --max:1480px;
  --gutter:clamp(1rem, 3vw, 2.5rem);
  --bleed:max(var(--gutter), (100vw - var(--max)) / 2);   /* distance from container edge to viewport edge */
  --tile-pad:clamp(1.1rem, 2.4vw, 2.25rem);
  --section-pad:clamp(3rem, 7vw, 6.5rem);
  --topbar-h:7.5rem;               /* overwritten by motion.js with the measured height */
  --topbar-compact:3.75rem;

  --ease:cubic-bezier(.2,.7,.2,1);
  --dur-fast:180ms;
  --dur:240ms;
  --shadow-hard:6px 6px 0 var(--brand-primary);
  --focus:var(--brand-primary);
}