/* ==========================================================================
   HYPER STEEL — DARK ARCHITECTURAL DESIGN TOKENS
   Core Concept: STEEL. SHADOW. ARCHITECTURE.
   Palette: Black (#000000), White (#FFFFFF), Gray, Gold (#F0A202)
   ========================================================================== */

:root {
  /* --- Primary Color System (Required by Prompt) --- */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-gray: #808080;
  --color-gray-muted: #A0A0A0;
  --color-gray-dark: #1A1A1A;
  --color-border: #292929;
  --color-gold: #F0A202;

  /* Supporting Surface & Hover Variants */
  --color-surface: #080808;
  --color-surface-elevated: #121212;
  --color-surface-card: #161616;
  --color-border-subtle: #202020;
  --color-border-focus: #3d3d3d;
  --color-gold-hover: #d69002;
  --color-gold-subtle: rgba(240, 162, 2, 0.12);
  --color-gold-glow: rgba(240, 162, 2, 0.25);

  /* --- Typography Families --- */
  --font-heading: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

  /* --- Fluid Page Dimensions --- */
  --page-gutter: clamp(20px, 5vw, 88px);
  --section-space: clamp(80px, 12vw, 160px);
  --content-max: 92rem; /* ~1472px */
  --content-narrow: 65rem;

  /* --- Fluid Type Scale (clamp) --- */
  --text-hero: clamp(2.85rem, 6.8vw, 7.2rem);
  --text-h1: clamp(2.4rem, 5vw, 4.8rem);
  --text-h2: clamp(1.85rem, 3.6vw, 3.4rem);
  --text-h3: clamp(1.25rem, 2vw, 2rem);
  --text-h4: clamp(1.05rem, 1.4vw, 1.35rem);
  --text-lead: clamp(1.05rem, 1.25vw, 1.25rem);
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.8125rem;
  --text-eyebrow: 0.75rem;

  /* --- Line Heights --- */
  --leading-none: 0.94;
  --leading-tight: 1.05;
  --leading-snug: 1.22;
  --leading-body: 1.65;

  /* --- Letter Spacing --- */
  --tracking-tighter: -0.04em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.12em;
  --tracking-widest: 0.22em;

  /* --- Spacing Scale (4px increments) --- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */
  --space-10: 8rem;     /* 128px */

  /* --- Architectural Geometry (Square / Minimal Radius) --- */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px; /* Buttons and controls strictly 0-4px */
  --radius-md: 4px;

  /* --- Transitions & Timing --- */
  --ease-architectural: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-fast: 0.2s;
  --duration-normal: 0.4s;
  --duration-slow: 0.75s;
  --duration-cinematic: 1.2s;

  /* --- Layering / Z-Index --- */
  --z-bg: 0;
  --z-base: 1;
  --z-content: 2;
  --z-card: 5;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}