/* tokens.css: the only file that defines the brand. Light theme only. */

:root {
  color-scheme: light;

  /* Palette */
  --red: #C8102E;
  --red-deep: #A30D25;
  --gold: #F2B705;          /* fills, rules and icons on dark only. Never text on light. */
  --gold-text: #7A5900;     /* the only gold allowed as text on light backgrounds */
  --burgundy: #5C1626;
  --burgundy-deep: #3F0E1A;
  --ink: #1F1416;
  --muted: #5F4F52;
  --white: #FFFDFA;         /* page background */
  --cream: #FBF3E6;
  --line: rgb(92 22 38 / 0.12);

  /* Type */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --fs-display: clamp(2.75rem, 6vw, 5.5rem);
  --fs-h2: clamp(2rem, 3.6vw, 3.25rem);
  --fs-h3: clamp(1.25rem, 1.6vw, 1.5rem);
  --fs-body: clamp(1rem, 0.97rem + 0.2vw, 1.125rem);
  --fs-small: 0.875rem;
  --tracking-display: -0.03em;
  --leading-display: 1.02;

  /* Aliases used by base.css */
  --bg: var(--white);
  --bg-elevated: var(--white);
  --bg-muted: var(--cream);
  --text: var(--ink);
  --text-muted: var(--muted);
  --accent: var(--red);
  --accent-contrast: var(--white);
  --accent-soft: rgb(200 16 46 / 0.1);

  /* Shadows are burgundy-tinted */
  --shadow: 0 1px 2px rgb(92 22 38 / 0.06), 0 8px 24px -12px rgb(92 22 38 / 0.18);
  --shadow-sm: 0 1px 2px rgb(92 22 38 / 0.06), 0 8px 24px -12px rgb(92 22 38 / 0.18);
  --shadow-lg: 0 2px 4px rgb(92 22 38 / 0.06), 0 28px 56px -24px rgb(92 22 38 / 0.30);
  --focus: 0 0 0 3px var(--white), 0 0 0 5px var(--red);

  /* Shape lock: buttons 10, cards 18, inputs 10, tags 6 */
  --radius-button: 10px;
  --radius-card: 18px;
  --radius-input: 10px;
  --radius-tag: 6px;

  /* Rhythm */
  --section-y: clamp(4.5rem, 8vw, 7.5rem);
  --gutter: clamp(1rem, 3vw, 2rem);
  --container: 1320px;
  --nav-h: 72px;
  --utility-h: 36px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.45s;

  /* Z-index scale */
  --z-base: 1;
  --z-sticky: 20;
  --z-nav: 40;
  --z-overlay: 60;
}

/* Focus ring on burgundy surfaces */
.band, .footer, .utility {
  --focus: 0 0 0 3px var(--burgundy), 0 0 0 5px var(--gold);
}
.footer { --focus: 0 0 0 3px var(--burgundy-deep), 0 0 0 5px var(--gold); }