/* The Devil's Wall — design tokens v1
   Fonts (Google Fonts):
   <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil:wght@700;800;900&family=Big+Shoulders:wght@500;700;800&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet"> */
:root {
  /* Smoke — the black wall of oil smoke. Base surfaces. */
  --dw-smoke-950: #0A0908;   /* page background */
  --dw-smoke-900: #110F0D;   /* section alt */
  --dw-smoke-800: #1B1714;   /* cards */
  --dw-smoke-700: #2A241E;   /* borders, rules */
  --dw-ash-500:   #6E655A;   /* muted text on dark, meta */
  /* Sand — the desert and the dossier paper. Text. */
  --dw-sand-300:  #C9B48E;   /* secondary text */
  --dw-sand-100:  #EFE6D2;   /* primary text on dark */
  --dw-paper:     #E6D9BC;   /* dossier panels (light sections) */
  /* Fire — oil well fire. Accent only: lines, numbers, CTAs, glows. */
  --dw-fire-600:  #C2410C;
  --dw-fire-500:  #E8661C;   /* primary accent */
  --dw-ember-400: #F59B2E;
  --dw-flare-200: #FFD27A;   /* hottest highlight */
  /* Stamp — "TOP SECRET" red. Labels/stamps only, never body. */
  --dw-stamp-600: #A8231C;
  /* Steel — cold smoke-blue sky from the Kuwait fire photos. Rare counterpoint. */
  --dw-steel-500: #5C7480;

  --dw-fire-line: linear-gradient(90deg, transparent, #E8661C 18%, #FFD27A 50%, #E8661C 82%, transparent);
  --dw-fire-glow: radial-gradient(60% 40% at 50% 100%, rgba(232,102,28,.35), transparent 70%);

  /* Type */
  --dw-font-title:   "Big Shoulders Stencil", "Big Shoulders", Impact, sans-serif; /* title, giant numbers */
  --dw-font-display: "Big Shoulders", "Arial Narrow", sans-serif;                 /* headings, nav, buttons (uppercase) */
  --dw-font-body:    "Source Serif 4", Georgia, serif;                             /* story copy */
  --dw-font-mono:    "IBM Plex Mono", ui-monospace, monospace;                     /* dossier labels, data, captions */

  --dw-text-hero:  clamp(4rem, 13vw, 12rem);   /* stencil, line-height .85 */
  --dw-text-h1:    clamp(2.75rem, 6vw, 5.5rem);/* display 800, uppercase, lh .95, tracking .01em */
  --dw-text-h2:    clamp(2rem, 4vw, 3.25rem);
  --dw-text-h3:    1.5rem;
  --dw-text-lead:  clamp(1.2rem, 1.6vw, 1.45rem); /* serif, lh 1.5 */
  --dw-text-body:  1.0625rem;                  /* serif, lh 1.65, max 62ch */
  --dw-text-label: .75rem;                     /* mono 500, uppercase, tracking .22em */
  --dw-text-stat:  clamp(3.5rem, 8vw, 7rem);   /* stencil numbers in fire-500 */

  /* Space & layout */
  --dw-gutter: clamp(16px, 4vw, 48px);
  --dw-max: 1320px;
  --dw-section-y: clamp(96px, 14vh, 180px);
  --dw-radius: 2px;          /* nearly square: military, not SaaS */

  /* Motion */
  --dw-ease-out:   cubic-bezier(.16, 1, .3, 1);    /* reveals */
  --dw-ease-inout: cubic-bezier(.65, 0, .35, 1);   /* wipes */
  --dw-ease-snap:  cubic-bezier(.7, 0, .2, 1);     /* stamps */
  --dw-dur-fast: 180ms;
  --dw-dur-base: 600ms;
  --dw-dur-slow: 1200ms;
  --dw-stagger: 70ms;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dw-dur-fast: 0ms; --dw-dur-base: 0ms; --dw-dur-slow: 0ms; --dw-stagger: 0ms; }
}