/* ============================================================================
   Design tokens — the single source of truth for colour, type, space, motion.
   No raw hex values downstream.

   Palette axis is fixed by the brief: warm smoke + industrial orange. The
   smoke ramp is deliberately warm-biased (hue ~220 but desaturated toward
   yellow at the light end) so it reads as painted machine steel rather than
   the blue-grey that generic dark themes default to.
   ========================================================================= */

:root {
  /* ---- smoke ramp: warm neutral, never blue ----------------------------- */
  --fume-950: #121316;   /* deepest ground — hero, footer */
  --fume-900: #1a1c20;   /* dark section ground */
  --fume-800: #24272c;   /* card surface on dark */
  --fume-700: #32363d;   /* rules, dividers, strokes */
  --fume-600: #464b53;
  --fume-500: #5c626c;   /* muted text on light */
  --fume-200: #b9bec6;   /* body text on dark */
  --fume-100: #d7dade;

  --fog-050: #f1f2f4;    /* light section ground */
  --fog-100: #e6e8ec;    /* alternating light band */
  --white:   #ffffff;

  /* The ground a matted machine stands on. Lit like the paper it was
     photographed against, so the shadow the matte left behind still reads as
     a shadow — brighter at the top where the studio light falls. */
  --studio: radial-gradient(118% 96% at 50% 2%, #ffffff 0%, #f3f3f1 58%, #e7e7e4 100%);

  /* ---- flame: industrial hazard orange, not terracotta ------------------ */
  --flame-600: #e25a00;
  --flame-500: #ff6b12;  /* the accent */
  --flame-300: #ff9a52;  /* hover, gradient tip */

  /* ---- borrowed, not ours ----------------------------------------------- */
  /* WhatsApp's own green. It is here as a token so it stays quarantined to the
     one mark that is entitled to it: a foreign brand colour loose in the smoke
     ramp would be the only thing on the page that answers to nobody. */
  --whatsapp: #25d366;
  --whatsapp-deep: #1da851;

  /* ---- functional ------------------------------------------------------- */
  --line:         rgb(255 255 255 / 0.09);   /* hairline on dark */
  --line-strong:  rgb(255 255 255 / 0.16);
  --line-light:   rgb(18 19 22 / 0.12);      /* hairline on light */
  --line-light-strong: rgb(18 19 22 / 0.22);
  --grid:         rgb(255 107 18 / 0.14);    /* technical grid on dark */
  --grid-light:   rgb(18 19 22 / 0.07);      /* technical grid on light */

  /* Blueprint stroke — the drawing ink. Distinct from the accent: the accent
     means "act on this", the blueprint ink means "this is measured". */
  --draft:        rgb(255 154 82 / 0.55);
  --draft-light:  rgb(226 90 0 / 0.42);

  /* ---- semantic surfaces ------------------------------------------------ */
  --surface-dark:      var(--fume-950);
  --surface-dark-alt:  var(--fume-900);
  --surface-light:     var(--fog-050);
  --surface-light-alt: var(--fog-100);

  --text-on-dark:        #edeff2;
  --text-on-dark-muted:  var(--fume-200);
  --text-on-light:       var(--fume-950);
  --text-on-light-muted: var(--fume-500);

  /* Orange is a light surface: text on it must be the deep smoke, never
     white. #fff on --flame-500 is 2.6:1; --fume-950 on it is 7.4:1. */
  --text-on-flame: var(--fume-950);

  --focus: var(--flame-500);

  /* ---- typography ------------------------------------------------------- */
  --font-display: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Archivo carries a wdth axis. Widened display type sits like a machine
     bed — heavy, stable, horizontal. This is the single strongest signal
     that the type was chosen rather than defaulted. */
  --display-width: 112;
  --display-width-wide: 122;

  /* The brief's ceiling was 7rem. At that size this headline breaks to five
     lines and pushes its own calls to action past the fold, so the cap comes
     down to 5.25rem — the hero still owns the screen, and the buttons are on
     it. Everything below the cap is unchanged. */
  --t-hero: clamp(2.5rem, 5.2vw, 5.25rem);
  --t-h2:   clamp(2rem, 4vw, 3.5rem);
  --t-h3:   clamp(1.25rem, 2vw, 1.75rem);
  --t-h4:   clamp(1.0625rem, 1.4vw, 1.3125rem);
  --t-lead: clamp(1.0625rem, 1.4vw, 1.3125rem);
  --t-body: clamp(1rem, 1.05vw, 1.125rem);
  --t-sm:   0.875rem;
  --t-cap:  0.75rem;
  --t-cap-sm: 0.6875rem;

  --leading-tight: 0.96;
  --leading-snug: 1.16;
  --leading-normal: 1.62;
  --leading-relaxed: 1.75;

  --track-display: -0.02em;
  --track-cap: 0.14em;

  /* ---- space (4px base) ------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --section-block: clamp(4.5rem, 2.5rem + 6.5vw, 9rem);
  --gutter: clamp(1.25rem, 0.5rem + 2.8vw, 3.5rem);
  --measure: 62ch;
  --container: 84rem;
  --container-narrow: 56rem;

  /* Width reserved for the calibration rail on wide screens. Enough for the
     scale, the jaw and the "01 / 07" readout on one line. */
  --rail-w: 5.5rem;

  /* ---- shape ------------------------------------------------------------ */
  --radius-sm: 2px;
  --radius: 3px;
  --hairline: 1px;

  /* ---- motion — one timing language, used everywhere -------------------- */
  --ease-micro: cubic-bezier(0.4, 0, 0.2, 1);     /* 150–250ms interactions */
  --ease-entry: cubic-bezier(0.22, 1, 0.36, 1);   /* 600–800ms section entry */
  --dur-micro: 200ms;
  --dur-entry: 700ms;

  /* ---- layers ----------------------------------------------------------- */
  --z-rail: 40;
  --z-header: 60;
  /* Above the header and the docked quote bar, below the drawer: opening the
     mobile menu must bury the floating button along with the page. */
  --z-fab: 65;
  --z-drawer: 70;
  --z-lightbox: 85;
  --z-cursor: 95;

  --header-h: 4.25rem;

  /* Declared rather than measured, and pinned onto .quote-bar so the two cannot
     drift: the floating WhatsApp button steps over the bar by exactly this. */
  --quote-bar-h: 3.875rem;
}

@media (min-width: 64em) {
  :root { --header-h: 5.25rem; }
}

/* Arabic: IBM Plex Sans Arabic has a larger apparent x-height and no width
   axis, so it needs looser leading and no negative tracking. */
:root:lang(ar),
[dir="rtl"] {
  --font-display: "IBM Plex Sans Arabic", "Archivo", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --track-display: 0;
  --track-cap: 0.05em;
  --leading-tight: 1.2;
  --leading-snug: 1.42;
}

/* Russian: Archivo ships no Cyrillic at all, so a Cyrillic headline set in it
   would silently fall back to whatever the OS offers — a different face on
   every machine. The superfamily carries the display role instead, exactly as
   it does for Arabic. IBM Plex Sans has no width axis, so the widths resolve
   to 100 and the uppercase display sizes lean on weight for their presence. */
:root:lang(ru) {
  --font-display: "IBM Plex Sans", system-ui, sans-serif;
  --display-width: 100;
  --display-width-wide: 100;
  --track-display: -0.015em;
  --track-cap: 0.1em;
  --leading-tight: 1.02;
  --leading-snug: 1.2;
}

/* ============================================================================
   Reset
   ========================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-block-start: calc(var(--header-h) + var(--space-4));

  /* `clip`, not `hidden`: hidden on the root turns it into a scroll container,
     which silently kills every `position: sticky` descendant. `clip` contains
     the off-canvas drawer and any transform that briefly reaches past the
     edge without touching the scroll model. */
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--leading-normal);
  color: var(--text-on-light);
  background: var(--surface-light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img,
picture,
svg,
video,
iframe {
  display: block;
  max-inline-size: 100%;
}

img,
picture,
svg,
video { block-size: auto; }

input,
button,
textarea,
select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  font-variation-settings: "wdth" var(--display-width);
  text-wrap: balance;
}

p { text-wrap: pretty; }

ul, ol { padding-inline-start: 0; list-style: none; }

table { border-collapse: collapse; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--flame-500);
  color: var(--text-on-flame);
}

/* Numeric data must align in columns wherever it stacks. */
.tnum { font-variant-numeric: tabular-nums; }

/* ============================================================================
   Reduced motion is a delivery condition, not an option.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
    transition-property: opacity !important;
    scroll-behavior: auto !important;
  }
}