/* ============================================================
   OPREP — Design Tokens
   Source of truth for color, typography, spacing, and radius.
   Changes here must be reflected in STYLE.md and /style-guide/.
   ============================================================ */

:root {
  /* ── Background / surfaces ─────────────────────────────── */
  --bg:          #0C0E14;   /* base background */
  --bg-card:     #141720;   /* card surface */
  --bg-elev:     #1A1E2A;   /* highest surface (modals, hovered cards) */
  --bg-deep:     #080A0F;   /* deepest (footer, sovereign section base) */

  /* ── Lines / dividers ──────────────────────────────────── */
  --line:        #2A2F3D;   /* default 1px border */
  --line-dim:    #1F2430;   /* subtle dividers, dashed lists */

  /* ── Text ───────────────────────────────────────────────── */
  --text:        #FFFFFF;   /* primary text (headings, emphasized) */
  --text-mid:    #B0B8C4;   /* body paragraph text */
  --text-dim:    #6B7280;   /* captions, meta, footer notes */

  /* ── Accents ────────────────────────────────────────────── */
  --accent:      #4EA8D9;   /* steel blue — primary CTA, links */
  --accent-hi:   #6CBDE8;   /* hover state for accent */
  --ops:         #2ECC71;   /* operational green — success, stage 2 */
  --warn:        #E88D2A;   /* warning amber — stage 3, cautions */
  --danger:      #E84D4D;   /* alert red — problem cards, errors */
  --purple:      #C06CD9;   /* tertiary — stage 4, graph/entity */

  /* ── Radius (defence aesthetic — sharp edges) ──────────── */
  --r-sm:        0;         /* buttons, pills, badges */
  --r-md:        0;         /* inputs, small cards */
  --r-lg:        0;         /* content cards, screenshot frames */

  /* ── Spacing scale (use as needed) ─────────────────────── */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  60px;
  --s-9:  80px;
  --s-10: 100px;
  --s-11: 120px;

  /* ── Typography ─────────────────────────────────────────── */
  --font:        'Manrope', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-h1:       clamp(40px, 6vw, 68px);
  --fs-h2:       clamp(30px, 4vw, 46px);
  --fs-h3:       22px;
  --fs-h4:       16px;
  --fs-body:     16px;
  --fs-caption:  13px;
  --fs-small:    11px;

  --lh-display:  1.05;
  --lh-heading:  1.15;
  --lh-body:     1.6;

  /* ── Shadows / effects ──────────────────────────────────── */
  --shadow-lg:   0 40px 120px rgba(0, 0, 0, 0.5);
  --ring-accent: 0 0 0 1px rgba(78, 168, 217, 0.15);
  --blur-nav:    blur(12px);

  /* ── Transitions ────────────────────────────────────────── */
  --t-fast:      0.15s ease;
  --t-base:      0.2s ease;
  --t-slow:      0.4s ease;
  --t-reveal:    0.6s cubic-bezier(0.22, 1, 0.36, 1);
}