/* ============================================================
   01Academy · Design Tokens
   Vivid+Co Design System — Prismatic Light Through Obsidian
   ============================================================ */

:root {
  /* --- Colors --- */
  --color-bone-white: #fffdf9;
  --color-obsidian: #101010;
  --color-graphite-veil: #495764;
  --color-ash-border: #403f3f;
  --color-fog-blue: #6f879c;
  --color-pure-black: #000000;
  --color-prism-red: #ff2a2a;
  --color-prism-cyan: #2a7fff;
  --color-prism-lime: #2aff2a;

  /* Surfaces */
  --surface-obsidian-canvas: #101010;
  --surface-graphite-veil: #495764;
  --surface-bone-card: #fffdf9;
  --surface-card-dark: #14171a;
  --surface-card-subtle: #1b2026;
  --surface-card-hover: #222830;

  /* Text mapping */
  --color-text-primary: var(--color-bone-white);
  --color-text-secondary: var(--color-fog-blue);
  --color-text-muted: #8b99a6;
  --color-border-hairline: var(--color-ash-border);

  /* Compatibility aliases for legacy variable hooks */
  --cream: var(--color-obsidian);
  --cream-2: #14171a;
  --cream-3: #1a1e23;
  --paper: #16191d;
  --espresso: #0d0e10;
  --espresso-2: #14171a;
  --espresso-3: #1d2127;
  --gold: var(--color-bone-white);
  --gold-light: var(--color-bone-white);
  --gold-deep: var(--color-fog-blue);
  --gold-tint: rgba(255, 253, 249, 0.06);
  --gold-line: var(--color-ash-border);
  --gold-glow: rgba(42, 127, 255, 0.08);
  --sage: var(--color-fog-blue);
  --sage-2: #7d96ab;
  --sage-tint: rgba(111, 135, 156, 0.12);
  --clay: var(--color-fog-blue);
  --clay-tint: rgba(255, 253, 249, 0.05);
  --ink: var(--color-bone-white);
  --ink-soft: var(--color-fog-blue);
  --ink-mute: #5a6d7e;
  --on-dark: var(--color-bone-white);
  --on-dark-soft: var(--color-fog-blue);
  --on-dark-mute: #5a6d7e;
  --line: var(--color-ash-border);
  --line-soft: #2e3338;
  --line-dark: var(--color-ash-border);
  --line-dark-2: #525960;

  /* --- Typography — Font Families --- */
  --font-neue-montreal: 'Neue Montreal', 'PP Neue Montreal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-d: var(--font-neue-montreal);
  --font-b: var(--font-neue-montreal);

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* Typography — Scale & Leading */
  --text-caption: 15px;
  --leading-caption: 1.2;
  --tracking-caption: 0.15px;

  --text-body-sm: 18px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: 0.01em;

  --text-body: 20px;
  --leading-body: 1.2;
  --tracking-body: -0.2px;

  --text-body-lg: 22px;
  --leading-body-lg: 1.2;
  --tracking-body-lg: -0.22px;

  --text-heading-sm: 33px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.33px;

  --text-heading: 36px;
  --leading-heading: 1.5;
  --tracking-heading: -0.01em;

  --text-heading-lg: 56px;
  --leading-heading-lg: 1.13;
  --tracking-heading-lg: -0.56px;

  --text-display-sm: 105px;
  --leading-display-sm: 1.01;
  --tracking-display-sm: -2.1px;

  --text-display: 136px;
  --leading-display: 1;
  --tracking-display: -2.72px;

  /* Fluid typography clamps for responsive scaling */
  --fs-display: clamp(48px, 7.5vw, 136px);
  --fs-display-sm: clamp(38px, 6vw, 105px);
  --fs-h1: clamp(36px, 5.2vw, 56px);
  --fs-h2: clamp(28px, 3.8vw, 44px);
  --fs-h3: clamp(22px, 2.5vw, 33px);
  --fs-h4: clamp(18px, 1.8vw, 22px);
  --fs-lead: clamp(18px, 1.6vw, 22px);
  --fs-body: clamp(16px, 1.3vw, 20px);
  --fs-sm: 18px;
  --fs-xs: 15px;

  --lh-tight: 1.0;
  --lh-head: 1.05;
  --lh-body: 1.45;

  /* --- Spacing Scale --- */
  --spacing-unit: 4px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-40: 40px;
  --spacing-56: 56px;
  --spacing-60: 60px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-108: 108px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 20px;
  --sp-5: 40px;
  --sp-6: 56px;
  --sp-7: 72px;
  --sp-8: 108px;
  --sp-9: 140px;

  /* Layout */
  --page-max-width: 1440px;
  --wrap: 1440px;
  --wrap-narrow: 920px;
  --section-gap: 108px;
  --section-y: clamp(64px, 7.5vw, 108px);
  --gutter: clamp(20px, 4vw, 48px);
  --card-padding: 20px;
  --element-gap: 7px;

  /* --- Border Radius --- */
  --radius-md: 5px;
  --radius-xl: 15px;
  --radius-full: 9999px;

  --radius-nav: 5px;
  --radius-tags: 9999px;
  --radius-cards: 15px;
  --radius-buttons: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius: 15px;
  --radius-lg: 15px;
  --radius-pill: 9999px;

  /* --- Zero Shadows (Flat by Design) --- */
  --shadow-xs: none;
  --shadow-s: none;
  --shadow-m: none;
  --shadow-l: none;
  --shadow-gold: none;

  /* --- Motion Philosophy --- */
  --ease: cubic-bezier(0.52, 0.01, 0, 1);
  --ease-vivid: cubic-bezier(0.52, 0.01, 0, 1);
  --ease-out: cubic-bezier(0.52, 0.01, 0, 1);
  --dur-fast: 0.25s;
  --dur: 0.5s;
  --dur-slow: 0.75s;

  /* --- Layers --- */
  --z-base: 1;
  --z-sticky: 40;
  --z-drawer: 45;
  --z-header: 50;
  --z-top: 70;

  /* --- Header Dimensions --- */
  --header-h: 84px;
  --header-h-shrunk: 68px;
}

@media (max-width: 880px) {
  :root {
    --header-h: 70px;
    --header-h-shrunk: 64px;
    --section-gap: 72px;
  }
}