/* Design tokens — from the approved mockup a-gold-vein.html (S2, 2026-10-29),
 * palette fixed by the brief (TZ §1.2). Names by role; mockup values as they were.
 * "added" marks what the mockup did not define but the site needs.
 */
:root {
  /* ── Colour: mockup / TZ ─────────────────────────────────────────────── */
  --color-bg: #11151B;
  --color-bg-deep: #0B0E12;                 /* live band */
  --surface-1: #1D232C;
  --surface-2: color-mix(in oklab, #1D232C 82%, #D9A441 4%);
  --surface-3: #262E39;
  --color-brand: #D9A441;
  --color-brand-deep: #8B6428;
  --color-btn: #E3B45A;
  --color-on-btn: #11151B;                  /* dark text on gold: 9.6:1 */
  --color-text: #FFFFFF;
  --color-muted: #B8C0CC;                   /* 10.3:1 on --color-bg */
  --color-line: rgba(255, 255, 255, .08);
  --color-line-gold: rgba(217, 164, 65, .28);
  --gold-grad: linear-gradient(100deg, #8B6428 0%, #D9A441 30%, #FFE6A8 48%, #D9A441 62%, #8B6428 100%);

  /* added */
  --color-btn-hover: color-mix(in srgb, #E3B45A 88%, white);
  --color-live: #E5484D;
  --color-error: #FF8A80;                   /* readable on dark surfaces */
  --color-success: #6FCF97;
  --color-info: #8AB4F8;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-brand) 55%, transparent);

  /* ── Typography: mockup ──────────────────────────────────────────────── */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --fs-h1: clamp(2.6rem, 6.2vw, 5.6rem);
  --fs-h1-page: clamp(2.2rem, 4.6vw, 4rem);  /* added: inner pages */
  --fs-h2: clamp(1.8rem, 3.4vw, 2.9rem);
  --fs-h3: 1.25rem;
  --fs-body: 16px;
  --fs-lead: clamp(1rem, 1.3vw, 1.15rem);
  --fs-small: .86rem;
  --fs-xs: .74rem;
  --lh-tight: 1.05;
  --lh-base: 1.6;
  --track-display: -.04em;

  /* ── Space, shape, depth ─────────────────────────────────────────────── */
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px;
  --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-96: 96px;
  --section-y: clamp(3rem, 6vw, 5rem);
  --gap-card: 18px;
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .25);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 40px -10px rgba(0, 0, 0, .6);

  /* signature: bullion chamfer */
  --cut: 12px;
  --chamfer: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));

  /* ── Container: mockup ───────────────────────────────────────────────── */
  --container: 1280px;
  --container-pad: 16px;
  --hdr-h: 76px;
  --hdr-h-small: 58px;

  /* ── Motion: mockup ease + added durations ───────────────────────────── */
  --ease: cubic-bezier(.22, .8, .24, 1);
  --dur-fast: 180ms;
  --dur-base: 300ms;
  --dur-slow: 450ms;

  /* ── Layers (added) ──────────────────────────────────────────────────── */
  --z-header: 50;
  --z-cookie: 80;
  --z-overlay: 90;
  --z-modal: 100;
  --z-gate: 120;
}

/* Breakpoints (constants, mirrored in kit.config.json → breakpoints):
   --bp-mobile 390 · 760 (mobile branch) · 1020 (burger) · 1180 (tight nav) · desktop 1440 */