/* ============================================================
   DIANA & SANS — DESIGN SYSTEM TOKENS
   ============================================================
   
   Every value in this file is a token.
   No hardcoded values should exist anywhere else.
   
   ============================================================ */

:root {

  /* ==========================================================
     1. COLOR TOKENS
     ========================================================== */

  /* Palette */
  --color-black-absolute: #0A0A0A;
  --color-black-warm: #111111;
  --color-ivory: #F6F2EB;
  --color-gold: #C4A86E;
  --color-gray-warm: #A6A29B;
  --color-white: #FFFFFF;

  /* Functional */
  --color-divider: rgba(255, 255, 255, 0.06);
  --color-divider-gold: rgba(196, 168, 110, 0.2);
  --color-surface: var(--color-black-absolute);
  --color-surface-elevated: var(--color-black-warm);
  --color-text-primary: var(--color-ivory);
  --color-text-secondary: var(--color-gray-warm);
  --color-text-accent: var(--color-gold);

  /* ==========================================================
     2. TYPOGRAPHY TOKENS
     ========================================================== */

  /* Families */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', -apple-system, Helvetica Neue, sans-serif;

  /* Weights */
  --weight-heading-light: 400;
  --weight-heading-medium: 500;
  --weight-heading-semibold: 600;
  --weight-body-light: 300;
  --weight-body-regular: 400;
  --weight-body-medium: 500;

  /* --- Type Scale --- */

  /* Display — Hero headline */
  --text-display: clamp(3.5rem, 6vw, 7.5rem);
  --text-display-lh: 1;
  --text-display-tracking: -0.02em;

  /* H1 — Section hero */
  --text-h1: clamp(2.5rem, 4.5vw, 5rem);
  --text-h1-lh: 1.1;
  --text-h1-tracking: -0.02em;

  /* H2 — Section title */
  --text-h2: clamp(2rem, 3.5vw, 4rem);
  --text-h2-lh: 1.15;
  --text-h2-tracking: -0.02em;

  /* H3 — Subsection */
  --text-h3: clamp(1.25rem, 1.8vw, 1.75rem);
  --text-h3-lh: 1.25;
  --text-h3-tracking: -0.01em;

  /* H4 — Card title */
  --text-h4: clamp(1.125rem, 1.4vw, 1.5rem);
  --text-h4-lh: 1.3;
  --text-h4-tracking: 0;

  /* Eyebrow — Section overline */
  --text-eyebrow: 0.625rem;
  --text-eyebrow-lh: 1.4;
  --text-eyebrow-tracking: 0.22em;

  /* Body — Paragraphs */
  --text-body: 0.9375rem;
  --text-body-lh: 1.8;
  --text-body-tracking: 0;

  /* Body Small — Captions in content */
  --text-body-small: 0.8125rem;
  --text-body-small-lh: 1.6;
  --text-body-small-tracking: 0;

  /* Caption — Labels, meta */
  --text-caption: 0.6875rem;
  --text-caption-lh: 1.4;
  --text-caption-tracking: 0.14em;

  /* CTA — Button text */
  --text-cta: 0.625rem;
  --text-cta-lh: 1.4;
  --text-cta-tracking: 0.22em;

  /* Stat — Number indicators */
  --text-stat: clamp(2.5rem, 3vw, 3.5rem);
  --text-stat-lh: 1;
  --text-stat-tracking: -0.02em;

  /* Tracking Presets */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.14em;
  --tracking-widest: 0.22em;

  /* Leading Presets */
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  /* ==========================================================
     3. SPACING TOKENS — 8px Baseline Grid
     ========================================================== */

  /* Atomic */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-96: 96px;
  --space-112: 112px;
  --space-120: 120px;
  --space-128: 128px;
  --space-160: 160px;
  --space-180: 180px;
  --space-192: 192px;
  --space-200: 200px;
  --space-220: 220px;

  /* --- Vertical Rhythm --- */

  /* Section breathing */
  --section-padding: var(--space-160);
  --section-gap: var(--space-160);

  /* Content block gap (between headline and body, etc.) */
  --block-gap: var(--space-80);

  /* Element gap (between related items) */
  --element-gap: var(--space-40);

  /* Tight gap (between label and value) */
  --tight-gap: var(--space-16);

  /* Micro gap (between inline items) */
  --micro-gap: var(--space-8);

  /* ==========================================================
     4. GRID TOKENS
     ========================================================== */

  --grid-container: 1440px;
  --grid-columns: 12;
  --grid-gutter: 32px;
  --grid-margin: 72px;
  --grid-page-margin: clamp(24px, 3.75vw, 72px);

  /* ==========================================================
     5. LAYOUT TOKENS
     ========================================================== */

  --navbar-height: 72px;
  --navbar-height-scrolled: 64px;

  /* ==========================================================
     6. RADIUS TOKENS
     ========================================================== */

  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* ==========================================================
     7. SHADOW / EFFECT TOKENS
     ========================================================== */

  --shadow-none: none;
  --shadow-glow: 0 0 120px 60px rgba(196, 168, 110, 0.05);
  --shadow-glow-strong: 0 0 200px 80px rgba(196, 168, 110, 0.07);

  /* ==========================================================
     8. TRANSITION TOKENS
     ========================================================== */

  /* Easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Duration — The luxury lives here */
  --duration-instant: 120ms;
  --duration-fast: 250ms;
  --duration-normal: 450ms;
  --duration-slow: 800ms;
  --duration-slower: 1200ms;
  --duration-emerge: 1600ms;

  /* ==========================================================
     9. Z-INDEX TOKENS
     ========================================================== */

  --z-below: -1;
  --z-base: 0;
  --z-above: 10;
  --z-navbar: 100;
  --z-overlay: 200;
  --z-modal: 300;
}