/* =============================================================================
   Prowel Telefusion · Atlas Series — Design System
   colors_and_type.css — Color & Typography foundations
   -----------------------------------------------------------------------------
   Provenance: extracted 1:1 from the source artifact
   `prowel-atlas-pitch-deck.html` (:root block, lines 16–73).

   Direction: "tech-utility" (Datadog / GitHub) in a "stealth" register.
   Palette is light-first with a dark stealth variant. One single accent:
   telecom green (status / online). Canonical values are OKLCH; each literal
   keeps an sRGB hex fallback directly above it for older renderers (same
   color, two notations — the hex is derived from the OKLCH, never invented).
   Derived colors use color-mix(); no raw hex is ever introduced downstream.

   Companion file: tokens.css (spacing, radius, elevation, motion, layout).
   ========================================================================== */

:root {
  /* ── Core palette ─────────────────────────────────────────────────────── */
  --bg:      #f6faf7;
  --bg:      oklch(98.2% 0.006 150);   /* page background — near-white, green-cool */

  --surface: #ffffff;
  --surface: oklch(100% 0 0);          /* cards / cells / raised surfaces */

  --fg:      #121b13;
  --fg:      oklch(21% 0.02 150);      /* primary text — near-black, green-cool */

  --muted:   #535e55;
  --muted:   oklch(47% 0.02 150);      /* secondary text / captions */

  --border:  #d5dbd6;
  --border:  oklch(88.5% 0.01 150);    /* hairline borders */

  --accent:  #006c28;
  --accent:  oklch(46% 0.14 150);      /* THE single accent — telecom green */

  /* ── Derived accent (color-mix only) ──────────────────────────────────── */
  --accent-ink:    color-mix(in oklch, var(--accent) 74%, black);   /* accent on light — meets AA for text */
  --accent-bright: color-mix(in oklch, var(--accent) 44%, white);   /* accent on dark */
  --accent-soft:   color-mix(in oklch, var(--accent) 12%, transparent); /* tinted fill (bonus bars) */
  --fg-soft:       color-mix(in oklch, var(--fg) 5%, transparent);  /* hover wash / zebra */

  /* ── Dark "stealth" variant ───────────────────────────────────────────── */
  --dark-bg:      #080f0a;
  --dark-bg:      oklch(16% 0.016 150);

  --dark-surface: #121913;
  --dark-surface: oklch(20.5% 0.016 150);

  --dark-fg:      #f0f2f0;
  --dark-fg:      oklch(96% 0.004 150);

  --dark-muted:   #a0a7a1;
  --dark-muted:   oklch(72% 0.012 150);

  --dark-border:  #29332b;
  --dark-border:  oklch(31% 0.02 150);

  /* ── Chrome (fixed top/bottom bars) — flips via body.dark ─────────────── */
  --chrome-bg:     color-mix(in oklch, var(--bg) 86%, transparent);
  --chrome-fg:     var(--fg);
  --chrome-muted:  var(--muted);
  --chrome-border: var(--border);
  --chrome-h: 58px;    /* top bar height */
  --chrome-fh: 66px;   /* bottom bar height */

  /* ── Typography: font stacks ──────────────────────────────────────────── */
  /* Display = serif (bookish, trustworthy); body = system sans (utility);
     numerics/labels = mono (telecom telemetry register). Three distinct voices. */
  --font-display: 'Iowan Old Style', 'Charter', 'Palatino Linotype', Georgia, 'Times New Roman', serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ── Fluid type scale (targets 1920×1080; title ≥ 36px, body ≥ 24px) ──── */
  --fs-h1:   clamp(46px, 4.8vw, 90px);     /* cover display headline */
  --fs-h2:   clamp(34px, 2.9vw, 56px);     /* slide title */
  --fs-h3:   clamp(21px, 1.55vw, 29px);    /* card / cell heading */
  --fs-lead: clamp(19px, 1.4vw, 27px);     /* lead paragraph */
  --fs-body: clamp(18px, 1.28vw, 24px);    /* body */
  --fs-cell: clamp(16px, 1.1vw, 21px);     /* dense cell / spec value */
  --fs-meta: clamp(12px, 0.82vw, 15px);    /* eyebrow / caption / label */

  /* ── Type metrics ──────────────────────────────────────────────────────── */
  --lh-tight: 1.06;   /* slide titles */
  --lh-display: 0.99; /* cover headline */
  --lh-body: 1.5;
  --ls-display: -0.028em;  /* cover */
  --ls-title: -0.02em;     /* slide titles */
  --ls-cell: -0.01em;      /* card headings */
  --ls-meta: 0.14em;       /* eyebrows / chrome labels (uppercase) */
  --ls-tag: 0.03em;        /* tags */

  /* ── Weight conventions ────────────────────────────────────────────────── */
  --fw-display: 700;
  --fw-heading: 650;
  --fw-body: 400;
  --fw-strong: 600;
}