/* ============================================================
   ULTRAINFRA — DESIGN TOKENS
   tokens.css · File 1 of 3
   Source of truth for every colour, type, spacing, and motion
   value used across the site. Never hardcode values anywhere else.
   ============================================================ */

:root {

  /* ── PRIMARY SURFACES ── */
  --bg:           #f5f4f0;
  --dark:         #0f0f0d;
  --surface:      #111110;

  /* ── ACCENT COLOURS ── */
  --accent:       #FF5949;
  --accent-2:     #00bfa5;

  /* ── TEXT ── */
  --fg:           #0f0f0d;
  --fg-dark:      #f5f4f0;
  --mid:          #888880;
  --mid-dark:     rgba(245,244,240,0.4);

  /* ── BORDERS ── */
  --border:       rgba(15,15,13,0.10);
  --border-dark:  rgba(245,244,240,0.08);

  /* ── SECTION DIVIDERS ── */
  --rule:         1px solid var(--border);
  --rule-dark:    1px solid var(--border-dark);

  /* ── XY PLANE (HERO) ── */
  --grid-line:    rgba(15,15,13,0.06);
  --grid-axis:    rgba(15,15,13,0.18);
  --grid-origin:  #FF5949;
  --grid-label:   rgba(15,15,13,0.45);

  /* ── COORDINATE REVEAL SECTION ── */
  --coord-bg:     #0f0f0d;
  --coord-axis:   rgba(245,244,240,0.15);
  --coord-tick:   rgba(245,244,240,0.28);
  --coord-active: #FF5949;
  --coord-cross:  #FF5949;

  /* ── CAROUSEL ── */
  --card-bg:      rgba(15,15,13,0.72);
  --card-border:  rgba(245,244,240,0.12);
  --card-glow:    rgba(255,89,73,0.15);

  /* ── TYPOGRAPHY ── */
  --font:         'DM Sans', Helvetica, Arial, sans-serif;
  --font-display: 'Syne', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* ── TYPE SCALE ── (homepage keeps the original scale — the site-wide
     reduction lives in nav-compact.css, which index.html never loads) */
  --text-display: clamp(3.2rem, 9.5vw, 9rem);
  --text-h1:      clamp(2.5rem, 6vw, 5.5rem);
  --text-h2:      clamp(1.8rem, 4vw, 3.8rem);
  --text-h3:      clamp(1.2rem, 2.5vw, 2rem);
  --text-body-lg: 1rem;
  --text-body-sm: 0.875rem;
  --text-label:   0.6rem;
  --text-caption: 0.55rem;
  --text-mono:    0.5rem;

  /* ── LETTER SPACING ── */
  --ls-tight:  -0.04em;
  --ls-normal: -0.02em;
  --ls-label:   0.28em;
  --ls-button:  0.18em;
  --ls-mono:    0.10em;

  /* ── LINE HEIGHT ── */
  --lh-display: 0.90;
  --lh-heading: 1.00;
  --lh-body:    1.70;
  --lh-label:   1.20;

  /* ── LAYOUT ── */
  --pad-x:     5vw;
  --pad-y:     10vh;
  --pad-x-sm:  4vw;
  --nav-h:     64px;
  --max-width: 1440px;
  --col-gap:   1.5rem;

  /* ── SPACING SCALE ── */
  --gap-sm:  0.5rem;
  --gap-md:  1.5rem;
  --gap-lg:  2.5rem;
  --gap-xl:  4rem;
  --gap-2xl: 6rem;

  /* ── EASING ── */
  --ease-studio: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout:  cubic-bezier(0.87, 0, 0.13, 1);

  /* ── Z-INDEX STACK ── */
  --z-base:    1;
  --z-float:   10;
  --z-coord:   20;
  --z-nav:     900;
  --z-overlay: 9000;
  --z-loader:  9999;
  --z-cursor:  10000;

  /* ── SHADOWS & GLOWS ── */
  --shadow-card:   0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
  --shadow-active: 0 0 40px rgba(255,89,73,0.15), 0 8px 32px rgba(0,0,0,0.5);
  --blur-nav:      blur(12px);
  --glow-logo:     drop-shadow(0 0 24px rgba(255,89,73,0.4));
}

/* ── MOBILE TOKEN OVERRIDES ── */
@media (max-width: 520px) {
  :root {
    --pad-x: var(--pad-x-sm);
    --pad-y: 8vh;
  }
}