/* Boostili — Surge design tokens.
 *
 * ── Direction contract (impeccable / new-work) ───────────────────────────────
 * THESIS   Boostili is the live conductor between Algerian businesses and every
 *          decision-maker in the country. Rendered as an INDUSTRIAL HIGH-VOLTAGE
 *          CONTROL PANEL — not "dark mode with a neon accent". Refuses the
 *          near-black-plus-glowing-edge cluster: amber here is matte painted
 *          safety-signal ink on powder-coated steel, never a lit tube.
 * OWN-WORLD Powder-coated near-black steel ground; painted electric-amber signal;
 *          etched panel-line rules; every figure a mono meter readout. Hard square
 *          edges, slab kickers, ruled bands. Light "spec-sheet" surfaces for
 *          browsing and reading. Archivo heavy-condensed (roman) display, Inter
 *          body, JetBrains Mono figures, Noto Sans Arabic mirror.
 * STORY    A cold paid-social visitor lands on a charged dark panel, reads one big
 *          measured coverage figure as proof, sees the offer + dual CTA, then
 *          descends into comfortable light spec-sheet surfaces to browse the
 *          databases and order over WhatsApp.
 * FIRST VP Dark control-panel hero: slab kicker, heavy-condensed headline, lede,
 *          dual CTA (compose pack / free sample) at left; a live coverage "readout"
 *          meter at right. Sticky nav morphs transparent→solid on scroll.
 * FORM     The attached SaaS-anatomy wireframe, remapped to a leads/database shop.
 * ─────────────────────────────────────────────────────────────────────────────
 *
 * Supersedes tokens-voltage.css (Hallmark). New filename on purpose — nginx serves
 * *.css `immutable, max-age=31536000`, so editing an old file never reaches a
 * returning visitor. Voltage/Almanac/Cobalt token files stay on disk as rollback.
 *
 * This file keeps every token NAME that the immutable boostili-download.css (and
 * the storefront dialogs) already consume, re-valued for Surge. Legacy Voltage
 * names (--c-band, --c-graphite, --c-ink-on-dark …) are kept as aliases so any
 * still-referencing rule renders correctly. Surge's own primary names
 * (--c-ground*, --c-on-ground*) drive the new stylesheet.
 *
 * Two house rules, carried from the brand and proven right:
 *   1. Amber is never the SOLE carrier of meaning (it may run bold — this is
 *      direct-response commerce, not a quiet editorial store).
 *   2. Amber never sets body text at --c-accent (fails AA on near-white). Text on
 *      light uses --c-accent-deep; bright amber (--c-accent-bright) is for fills,
 *      rules and figures on the DARK ground only.
 */

:root {
  /* ── Light "spec-sheet" surfaces — near-neutral white; the logo is drawn on
     white and ivory muddies amber. Cool by a hair so amber reads warm. ── */
  --c-paper: oklch(99% 0.002 250);
  --c-paper-2: oklch(96.8% 0.004 250);
  --c-paper-3: oklch(93.5% 0.006 250);

  /* ── Multi-band dark ground — powder-coated steel. The real evolution over
     Voltage, which had only ONE inverted band. Cool near-black (hue 265) so the
     painted amber reads warm and live against it. ── */
  --c-ground: oklch(13% 0.014 265);    /* deepest — hero page ground, footer */
  --c-ground-2: oklch(17.5% 0.014 265); /* section bands, nav-on-scroll fill */
  --c-ground-3: oklch(22.5% 0.013 265); /* raised cells within a band, hover */

  /* Legacy Voltage aliases — .bdl::backdrop (download.css) reads --c-graphite;
     kept pointing at the ground so nothing renders transparent. */
  --c-band: var(--c-ground);
  --c-band-2: var(--c-ground-2);
  --c-graphite: var(--c-ground);
  --c-graphite-2: var(--c-ground-2);

  /* ── Ink on light — warm-neutral near-black from the wordmark, never #000. ── */
  --c-ink: oklch(21% 0.008 260);
  --c-ink-2: oklch(38% 0.008 260);
  --c-ink-3: oklch(50% 0.008 260);   /* 5.83:1 on paper — carries --text-sm captions */

  /* ── Text on the dark ground — TINTED from the ground hue, never flat gray
     (craft floor: tint secondary text from the surface hue). ── */
  --c-on-ground: oklch(96% 0.004 250);
  --c-on-ground-2: oklch(74% 0.010 265);  /* ~9:1 on --c-ground */
  --c-on-ground-3: oklch(60% 0.012 265);  /* dim panel labels — ~5.6:1 on --c-ground */
  /* Legacy Voltage aliases */
  --c-ink-on-dark: var(--c-on-ground);
  --c-ink-on-dark-2: var(--c-on-ground-2);

  /* ── Structure — carried by rules and slabs, not card borders. ── */
  --c-rule: oklch(89% 0.005 250);
  --c-rule-2: oklch(80% 0.006 250);
  --c-rule-dark: oklch(30% 0.012 265);    /* etched panel line on the ground */
  --c-rule-dark-2: oklch(40% 0.014 265);  /* stronger panel seam */

  /* ── Brand amber, sampled from the logo (#f8a800). Painted, matte, live —
     chroma sits just below neon so it reads as signage ink, not a lit tube. ── */
  --c-accent: oklch(78% 0.158 77);         /* fills, energy */
  --c-accent-hover: oklch(72% 0.160 72);   /* pressed paint — hover on amber fills */
  --c-accent-deep: oklch(54% 0.155 55);    /* AA-safe amber TEXT on light — 5.17:1 on paper */
  --c-accent-ink: oklch(18% 0.012 65);     /* ink on amber fills — 9.5:1 on --c-accent */
  --c-accent-wash: oklch(95.5% 0.035 80);  /* faint amber well / highlight row on light */
  --c-accent-bright: oklch(82% 0.155 80);  /* figures + rules on the DARK ground only */

  /* ── Truth-telling colours. Never decorative. ── */
  --c-ok: oklch(52% 0.13 150);
  --c-ok-wash: oklch(95% 0.03 150);
  --c-warn: oklch(64% 0.14 50);
  --c-warn-wash: oklch(95% 0.04 60);
  --c-danger: oklch(52% 0.19 27);
  --c-danger-wash: oklch(95% 0.04 27);

  /* Focus ring — cool blue, so it never reads as the amber accent. Visible on
     both the light surfaces and the dark ground. */
  --c-focus: oklch(60% 0.19 252);

  /* ── Type. Display is heavy condensed Archivo, ROMAN only — never italic
     (slanted display type is a reliable AI tell; the logo's slant lives in the
     image asset). Every figure on the site is mono. Arabic differs by size,
     weight and tracking, not a second family. ── */
  --font-display: "Archivo", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-arabic: "Noto Sans Arabic", var(--font-body);

  /* Archivo variable axes — heavy + condensed like the wordmark. */
  --wdth-display: 77;
  --wght-display: 800;
  --wght-display-2: 640;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
  --text-3xl: clamp(1.875rem, 1.3rem + 2.4vw, 2.875rem);
  --text-display: clamp(2.75rem, 1.6rem + 5vw, 5rem);
  --text-figure: clamp(3rem, 1.5rem + 6vw, 6rem);   /* meter readout — capped at the 6rem display ceiling */

  /* Condensed heavy display wants tight tracking (floor is -0.04em). */
  --track-display: -0.025em;
  --track-mono: 0.06em;
  --track-caps: 0.1em;

  --measure: 66ch;

  /* 4-point scale — matches the build pipeline and download.css. */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  /* Slab brand — hard edges, square everywhere. */
  --radius-btn: 0;
  --radius-card: 0;
  --radius-input: 0;

  --rule-thin: 1px;
  --rule-thick: 2px;
  --rule-slab: 3px;
  --rule-heavy: 4px;   /* hero panel frame + primary section seams */

  /* Shadows — neutral near-black with real offset AND soft blur (never an amber
     halo). Used sparingly: the panel world separates with etched rules, so
     shadow is reserved for things that truly float (nav-on-scroll, drawer,
     dialog). */
  --shadow-sm: 0 1px 2px oklch(15% 0.01 265 / 0.14), 0 2px 6px oklch(15% 0.01 265 / 0.08);
  --shadow-md: 0 4px 10px oklch(15% 0.01 265 / 0.12), 0 14px 34px oklch(15% 0.01 265 / 0.14);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short: 200ms;
  --dur-mid: 320ms;
  --dur-long: 560ms;   /* the one authored hero moment */
}

/* Anyone who has asked for less motion gets a crossfade at most. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-short: 120ms;
    --dur-mid: 150ms;
    --dur-long: 160ms;
  }
}