/* ============================================================
   Steelira — Design Tokens (single source of truth)
   Dark industrial system · molten-steel orange accent (FLAT)
   One background under every section of every page: no washes,
   no gradients, no shadows, no blur, and no rule between sections.
   Override --accent-* only to rebrand.
   ============================================================ */

:root {
  /* ---- Background ramp (page → deepest) ---- */
  --bg-base: #06070A;
  --bg-900: #0A0B0E;   /* the ONE section background for every section */
  --bg-800: #0F1013;

  /* ---- Surfaces (raised UI on top of bg) ---- */
  --surface-1: #131418;
  --surface-2: #1A1C21;
  --surface-3: #22242B;
  --surface-glass: #0A0B0E;   /* solid: nothing behind it is blurred */

  /* ---- Text ramp ---- */
  --text-primary: #F5F6F8;
  --text-secondary: #B7BCC6;
  --text-muted: #8A9099;
  --text-faint: #5B6069;
  --text-on-accent: #170A02;

  /* ---- Borders / rings ---- */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --ring: #FF7A33;

  /* ---- Accent: molten steel ---- */
  --accent: #FF6A2B;
  --accent-hover: #FF8146;
  --accent-press: #E85416;
  --accent-2: #FFB020;          /* amber — secondary highlight */
  --accent-soft: rgba(255, 106, 43, 0.14);
  --accent-glow: rgba(255, 106, 43, 0.34);

  /* ---- Semantic ---- */
  --success: #34D399; --success-soft: rgba(52,211,153,.14);
  --warning: #FBBF24; --warning-soft: rgba(251,191,36,.14);
  --error:   #F87171; --error-soft:   rgba(248,113,113,.14);
  --info:    #38BDF8; --info-soft:    rgba(56,189,248,.14);

  /* ---- No gradients ----
     Each former gradient resolves to the solid it was made from, so every
     surface and every mark carries one honest value. */
  --grad-accent: var(--accent);
  --grad-aurora: none;
  --grad-surface: var(--surface-1);
  --grad-text: none;

  /* ---- Elevation ----
     Nothing is lifted or glowed: a panel is told from the page by a hairline
     and a single tonal step, and by nothing else. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-glow: none;

  /* ---- Type ----
     Oswald carries the headlines: a condensed industrial grotesque cut from
     rolled-steel signage, which lets a long mill headline hold one line.
     Albert Sans carries running and interface text on a far rounder,
     wider skeleton, and Inconsolata carries gauges, coil IDs and tonnages. */
  --font-sans: "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Oswald", "Albert Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Inconsolata", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --fs-display: clamp(2.75rem, 1.6rem + 5.6vw, 5.5rem);
  --fs-h1: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 2.1vw, 2.75rem);
  --fs-h3: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem);
  --fs-h4: clamp(1.125rem, 1.02rem + .5vw, 1.375rem);
  --fs-lead: clamp(1.125rem, 1.02rem + .5vw, 1.375rem);
  --fs-body: 1rem;
  --fs-body-lg: 1.125rem;
  --fs-small: .875rem;
  --fs-micro: .75rem;

  /* ---- Spacing (4-pt base / 8-pt rhythm) ---- */
  --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --space-24: 96px; --space-28: 112px; --space-32: 128px; --space-40: 160px;

  /* ---- Radii ---- */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 24px; --radius-2xl: 32px; --radius-pill: 999px;

  /* ---- Containers & rhythm ---- */
  --container-sm: 640px; --container-md: 768px; --container-lg: 1024px;
  --container-xl: 1200px; --container-2xl: 1320px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(64px, 8vw, 128px);
  --section-y-lg: clamp(96px, 12vw, 176px);
  --stack: clamp(16px, 2vw, 24px);

  /* ---- Grid ---- */
  --grid-cols: 12;
  --grid-gap: clamp(16px, 2vw, 24px);

  /* ---- Motion ---- */
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-slower: 600ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
}