/* ============================================================
   TradePass — Design tokens
   Source: TradePass Identity System, Brand Specification v1.0
   Direction 24 — Invisible Connection
   ============================================================ */

:root {
  /* ---- Colour ---- */
  --tp-midnight: #0B1320;
  --tp-midnight-hover: #16223A;
  --tp-line-dark: #1C2637;
  --tp-gold: #CBA96B;
  --tp-gold-hover: #B8955A;
  --tp-cream: #F7F5F0;
  --tp-white: #FFFFFF;
  --tp-line: #E2DED4;
  --tp-slate: #6B7280;
  --tp-slate-dark: #8A94A6;
  --tp-sage: #2E7D64;

  /* Derived support tones (kept minimal, per "three families / few tones") */
  --tp-sage-soft: rgba(46, 125, 100, 0.12);
  --tp-sage-bright: #5FBFA0;
  --tp-clay: #9A3B3B;
  --tp-clay-soft: rgba(154, 59, 59, 0.10);
  --tp-gold-soft: rgba(203, 169, 107, 0.14);
  --tp-midnight-soft: rgba(11, 19, 32, 0.05);
  --tp-hairline-slate: rgba(107, 114, 128, 0.20);

  /* ---- Type ---- */
  --tp-font-display: "Manrope", system-ui, sans-serif;
  --tp-font-body: "Inter", system-ui, sans-serif;
  --tp-font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* ---- Radii ---- */
  --tp-r-input: 6px;
  --tp-r-card: 12px;
  --tp-r-pass: 20px;
  --tp-r-pill: 999px;

  /* ---- Elevation (pass card only) ---- */
  --tp-shadow-pass: 0 24px 60px rgba(11, 19, 32, 0.22);

  /* ---- Motion ---- */
  --tp-ease: 160ms ease-out;

  /* ---- Layout ---- */
  --tp-max: 1200px;
  --tp-sidebar: 244px;
  --tp-topbar: 76px;

  /* ---- Spacing scale · 4px base ---- */
  --tp-1: 4px;
  --tp-2: 8px;
  --tp-3: 12px;
  --tp-4: 16px;
  --tp-6: 24px;
  --tp-8: 32px;
  --tp-12: 48px;
  --tp-16: 64px;
  --tp-24: 96px;
}