/* ============================================================
   Veil — Design Tokens
   Single source of truth for color, spacing, radius, shadow, type.
   Dark mode is the default (and only) theme.
   ============================================================ */

:root {
  /* ---- Surfaces / background ---- */
  --bg:          #071012;
  --surface:     #0B1619;
  --surface-2:   #102126;
  --surface-3:   #16292F;

  /* ---- Borders ---- */
  --border:        rgba(120, 255, 240, 0.14);
  --border-strong: rgba(120, 255, 240, 0.26);
  --border-soft:   rgba(120, 255, 240, 0.08);

  /* ---- Accent: electric turquoise (single dominant accent) ---- */
  --primary:        #00F5E1;
  --primary-hover:  #00E0CF;
  --primary-active: #00CABB;
  --primary-glow:   rgba(0, 245, 225, 0.22);
  --primary-tint:   rgba(0, 245, 225, 0.10);
  --primary-tint-2: rgba(0, 245, 225, 0.05);

  /* ---- Text ---- */
  --text:           #F4FEFC;
  --text-secondary: rgba(244, 254, 252, 0.72);
  --text-muted:     rgba(244, 254, 252, 0.48);
  --text-faint:     rgba(244, 254, 252, 0.30);

  /* On-accent text (dark, for contrast on turquoise) */
  --on-primary: #04211E;

  /* Status (kept within the turquoise family) */
  --online: #2FF5C6;

  /* ---- Typography ---- */
  --font-ui:      "Onest", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Sora", var(--font-ui);
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Fluid type scale */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.8125rem; /* 13 */
  --fs-base: 0.9375rem; /* 15 */
  --fs-md:   1.0625rem; /* 17 */
  --fs-lg:   1.375rem;  /* 22 */
  --fs-xl:   clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem);

  /* ---- Radius (12–18px, consistent) ---- */
  --r-sm:    10px;
  --r-input: 12px;
  --r-btn:   12px;
  --r-md:    14px;
  --r-card:  18px;
  --r-pill:  999px;

  /* ---- Spacing scale ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ---- Shadows / depth (restrained) ---- */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 24px 60px -24px rgba(0, 0, 0, 0.75),
                 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-btn:  0 8px 24px -10px var(--primary-glow);
  --ring:        0 0 0 3px var(--primary-glow);

  /* ---- Layout ---- */
  --container: 1200px;
  --header-h:  68px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  180ms;
}