/* ============================================================
   ProtonBusMods — Canonical Design Tokens (PRO-271)
   Verbatim mirror of c:\temp\bsc\ds\colors_and_type.css :root block.
   SSoT for surface ramp, text ramp, brand, semantic accents, radii,
   type families, type scale, tracking, weights, motion, layout.

   Served by includes/header.php BEFORE assets/css/tailwind.min.css.
   Tailwind utilities (bg-slate-900 etc) still resolve to the same
   hex values via tailwind.config.js — these vars are additive.

   Drift gate: keep this file byte-identical to the :root block in
   the source above. Drift check script lands in PRO-273.
   ============================================================ */

:root {
  /* ---- SURFACE RAMP (deep blue-navy, not gray) ---- */
  --bg-0: #07091a;   /* page background */
  --bg-1: #0d1126;   /* section / sidebar / footer */
  --bg-2: #141a35;   /* card fill, inputs */
  --bg-3: #1c2447;   /* raised card, chip, hover target */
  --bg-4: #232c55;   /* hover state */

  /* ---- HAIRLINE BORDERS (translucent white) ---- */
  --line:        rgba(255, 255, 255, 0.06);
  --line-2:      rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* ---- TEXT RAMP (cool white) ---- */
  --t-1: #f3f5fb;   /* primary / headings */
  --t-2: #b6bfdb;   /* body */
  --t-3: #7c86a8;   /* caption / muted */
  --t-4: #565f80;   /* faint / disabled */

  /* ---- BRAND ---- */
  --blue:      #3b82f6;   /* primary action, active chip */
  --blue-2:    #60a5fa;   /* links, accents on dark */
  --blue-deep: #1d4ed8;
  --purple:    #8b5cf6;   /* gradient partner only */
  --grad: linear-gradient(135deg, #60a5fa 0%, #8b5cf6 100%);

  /* ---- SEMANTIC ACCENTS (small use only) ---- */
  --good: #22c55e;   /* new / success */
  --hot:  #f97316;   /* "em alta" / trending */
  --warn: #f59e0b;   /* featured / star */
  --pink: #ec4899;
  --gold: #fbbf24;   /* star ratings */

  /* ---- RADII ---- */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;

  /* ---- TYPE FAMILIES ---- */
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ---- TYPE SCALE (px) ---- */
  --fs-display: 56px;   /* desktop hero H1 */
  --fs-h1:      30px;   /* mobile hero H1 */
  --fs-h2:      28px;   /* desktop section title */
  --fs-h2-m:    19px;   /* mobile section title */
  --fs-title:   16px;   /* card / sheet title */
  --fs-body:    14px;   /* base */
  --fs-sm:      12.5px; /* secondary */
  --fs-caption: 11px;   /* captions */
  --fs-eyebrow: 10.5px; /* mono labels */

  /* ---- TRACKING ---- */
  --track-display: -0.035em;
  --track-head:    -0.02em;
  --track-body:    -0.005em;
  --track-eyebrow:  0.08em;  /* positive — for uppercase mono */

  /* ---- WEIGHTS ---- */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold: 600;
  --w-bold:    700;
  --w-heavy:   800;

  /* ---- MOTION ---- */
  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --dur-fast: 120ms;
  --dur-pop:  150ms;
  --dur-sheet: 220ms;

  /* ---- LAYOUT ---- */
  --w-phone:   390px;
  --w-content: 1280px;
  --gutter:    32px;
  --sidebar:   280px;
}