/* ============================================================
   tokens.css
   Design tokens — single source of truth.
   Every color, spacing, type, motion value lives here.
   Per DESIGN.md §2 / §3 / §4 / §7.
   Do NOT hard-code hex, px, or duration values elsewhere.
   ============================================================ */

:root {
  /* -------- Surfaces — dark institutional graphite -------- */
  --surface-0:        #0A0C10;  /* Page background */
  --surface-1:        #11141A;  /* Section elevated */
  --surface-2:        #181C24;  /* Card / panel */
  --surface-3:        #232832;  /* Hover, secondary panel */

  /* -------- Borders & dividers -------- */
  --border-subtle:    #1F242E;
  --border-default:   #2A3140;
  --border-strong:    #3A4254;

  /* -------- Text hierarchy -------- */
  --text-primary:     #F2F4F8;
  --text-secondary:   #B4BCC9;
  --text-tertiary:    #7A8497;
  --text-quaternary:  #4A5366;

  /* -------- Electric blue — accent, ≤5% of any screen -------- */
  --accent:           #2E7BFF;
  --accent-bright:    #5A9BFF;
  --accent-dim:       #1E4FAA;
  --accent-wash:      rgba(46, 123, 255, 0.08);

  /* -------- Signal colors — data viz / status -------- */
  --signal-power:     #E8A33D;  /* Tungsten amber — power, energy, load */
  --signal-positive:  #4FB286;  /* Operational, online, contracted */
  --signal-warning:   #D97757;  /* Caution, pending, queued */
  --signal-critical:  #C8533A;  /* Fault, offline */

  /* -------- Type scale (desktop; clamps shrink on mobile) -------- */
  --font-display-xl:  clamp(56px, 7vw, 96px);
  --font-display-lg:  clamp(40px, 5vw, 64px);
  --font-display-md:  clamp(32px, 3.5vw, 44px);
  --font-heading:     24px;
  --font-subheading:  18px;
  --font-body-lg:     17px;
  --font-body:        15px;
  --font-body-sm:     13px;
  --font-mono-data:   15px;
  --font-eyebrow:     12px;

  /* -------- Font stacks
     Production target: Neue Haas Grotesk Display Pro for display.
     Free build fallback (current): Inter Tight.
     Document this in README. -------- */
  --font-display:     'Inter Tight', 'Inter Display', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body-family: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* -------- Spacing (strict 4px base) -------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-8:  48px;
  --space-10: 64px;
  --space-12: 96px;
  --space-16: 128px;
  --space-20: 160px;

  /* -------- Container & gutters -------- */
  --container-max:    1320px;
  --gutter-mobile:    24px;
  --gutter-tablet:    48px;
  --gutter-desktop:   80px;

  /* -------- Radius -------- */
  --radius-sm: 4px;   /* Buttons, inputs */
  --radius-md: 6px;   /* Cards, panels */

  /* -------- Motion -------- */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   600ms;

  /* -------- Layout primitives -------- */
  --nav-height:      72px;
  --z-nav:           100;
  --z-drawer:        99;
}