/* ============================================================
   PARHELION — DESIGN TOKENS
   Brand System v1.0 · derived from website mockup v2
   Source of truth: "Parhelion Design System.dc.html" § 08
   ============================================================ */

:root {
  /* ── void · surfaces ───────────────────────────────────── */
  --void-000: #050403;   /* page background */
  --void-100: #0E0D0B;   /* alternating band */
  --void-200: #171614;   /* card surface */
  --void-300: #231D15;   /* raised / hover card */
  --void-400: #35281F;   /* warm edge, dividers */

  /* ── gold · accent & action ────────────────────────────── */
  --gold-300: #F0C86A;   /* hover / highlight */
  --gold-400: #D6A957;   /* display type, logo */
  --gold-500: #C9A24A;   /* primary · borders, labels */
  --gold-700: #99641B;   /* deep / pressed */
  --gold-900: #472805;   /* glow base, gradients */

  /* ── text ──────────────────────────────────────────────── */
  --text-primary:   #F2EDE4;  /* 15.9:1 — headings, body */
  --text-secondary: #A79C8C;  /*  7.6:1 — paragraphs, meta */
  --text-muted:     #6E655A;  /*  3.4:1 — legal, timestamps */
  --text-gold:      #C9A24A;  /*  8.1:1 — eyebrows, links, data */
  --ink-on-gold:    #050403;  /* the ONLY ink allowed on gold fill */

  /* ── lines & light ─────────────────────────────────────── */
  --hairline:        rgba(201, 162, 74, 0.18);
  --hairline-active: rgba(201, 162, 74, 0.45);
  --hairline-faint:  rgba(201, 162, 74, 0.12);
  --wash-gold:       rgba(201, 162, 74, 0.05);
  --wash-gold-hover: rgba(201, 162, 74, 0.08);
  --glow-soft:   0 0 40px rgba(201, 162, 74, 0.10);
  --glow-strong: 0 0 60px rgba(201, 162, 74, 0.22);

  /* ── photographic only · never a UI colour ─────────────── */
  --stage-blue:      #1756B8;
  --stage-blue-deep: #0A3378;
  --stage-blue-void: #02112B;

  /* ── type ──────────────────────────────────────────────── */
  --font-display: 'Jost', system-ui, sans-serif;
  --font-text:    'Barlow', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --track-display: 0.20em;
  --track-heading: 0.18em;
  --track-eyebrow: 0.30em;
  --track-label:   0.16em;

  /* Type scale. Desktop values are the spec; the clamp floor keeps
     the wide tracking legible once the viewport can no longer hold it. */
  --size-display-xl: clamp(2.75rem, 1.30rem + 6.20vw, 6rem);    /* 96px */
  --size-display-lg: clamp(2.00rem, 1.20rem + 3.40vw, 3.5rem);  /* 56px */
  --size-heading-1:  clamp(1.75rem, 1.30rem + 1.90vw, 2.5rem);  /* 40px */
  --size-heading-2:  clamp(1.375rem, 1.18rem + 0.85vw, 1.75rem);/* 28px */
  --size-eyebrow:    0.8125rem;  /* 13px */
  --size-label:      0.875rem;   /* 14px */
  --size-body:       1.0625rem;  /* 17px */
  --size-caption:    0.875rem;   /* 14px */

  --leading-body:    1.75;
  --leading-caption: 1.6;

  /* ── space · 8px base ──────────────────────────────────── */
  --space-1: 8px;    /* icon gaps, inline */
  --space-2: 16px;   /* label to value */
  --space-3: 24px;   /* card padding, button x */
  --space-4: 32px;   /* grid gap */
  --space-5: 48px;   /* heading to content */
  --space-6: 64px;   /* block separation */
  --space-7: 96px;   /* page gutter */
  --space-8: 128px;  /* section padding (y) */

  /* ── geometry ──────────────────────────────────────────── */
  --radius-none: 0;      /* cards, media, rows — everything */
  --radius-sm:   2px;    /* buttons only */
  --container: 1440px;
  --gutter:    var(--space-7);
  --section-y: var(--space-8);

  /* ── motion ────────────────────────────────────────────── */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  240ms;
}

/* The gutter and section rhythm collapse on narrow viewports.
   Nothing else in the system is viewport-dependent. */
@media (max-width: 1024px) {
  :root { --gutter: var(--space-5); --section-y: var(--space-7); }
}
@media (max-width: 640px) {
  :root { --gutter: var(--space-3); --section-y: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
}