/* ============================================================
   TJR INTERACTIVE — DESIGN TOKENS v2
   Updated palette: Deep Crimson · Void Black · Signal Blue
   Single source of truth. Touch only this file to retheme.
   ============================================================ */

:root {
  /* --- BACKGROUNDS --- */
  --clr-bg:           #0A0A0B;
  --clr-surface:      #0F0F11;
  --clr-surface-2:    #141417;
  --clr-surface-3:    #1A1A1F;

  /* --- BORDERS --- */
  --clr-border:       rgba(255,255,255,0.06);
  --clr-border-hover: rgba(255,255,255,0.12);
  --clr-border-focus: rgba(45,126,242,0.5);

  /* --- BRAND: Deep Crimson --- */
  --clr-red:          #8B0000;
  --clr-red-bright:   #A50000;
  --clr-red-dim:      rgba(139,0,0,0.15);
  --clr-red-glow:     rgba(139,0,0,0.28);

  /* --- BRAND: Signal Blue --- */
  --clr-blue:         #2D7EF2;
  --clr-blue-mid:     #1A6FE0;
  --clr-blue-dim:     rgba(45,126,242,0.12);
  --clr-blue-glow:    rgba(45,126,242,0.32);

  /* --- TEXT --- */
  --clr-text-primary:   #F0F0F5;
  --clr-text-secondary: #7A7A90;
  --clr-text-muted:     #3E3E52;
  --clr-text-disabled:  #28283A;

  /* --- STATUS --- */
  --clr-success:     #16A34A;
  --clr-success-dim: rgba(22,163,74,0.12);
  --clr-warning:     #D97706;
  --clr-warning-dim: rgba(217,119,6,0.12);
  --clr-danger:      #DC2626;
  --clr-danger-dim:  rgba(220,38,38,0.12);

  /* --- SIDEBAR --- */
  --clr-sidebar-bg:  #080809;
  --sidebar-w:       240px;
  --sidebar-w-col:   64px;

  /* --- TYPOGRAPHY --- */
  --font-display: 'Manrope', sans-serif;
  --font-body:    'Manrope', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --fs-xs:   0.688rem;
  --fs-sm:   0.813rem;
  --fs-base: 0.938rem;
  --fs-md:   1.063rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.75rem;
  --fs-4xl:  3.75rem;
  --fs-5xl:  5rem;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-normal: 1.6;
  --lh-loose:  1.85;

  --ls-tight:   -0.03em;
  --ls-normal:   0;
  --ls-wide:     0.06em;
  --ls-wider:    0.12em;
  --ls-widest:   0.20em;

  /* --- SPACING --- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* --- RADII --- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-full: 9999px;

  /* --- SHADOWS --- */
  --shadow-xs:   0 1px 4px rgba(0,0,0,0.5);
  --shadow-sm:   0 2px 10px rgba(0,0,0,0.5);
  --shadow-md:   0 4px 24px rgba(0,0,0,0.6);
  --shadow-lg:   0 8px 48px rgba(0,0,0,0.7);
  --shadow-red:  0 0 28px rgba(139,0,0,0.18);
  --shadow-blue: 0 0 28px rgba(45,126,242,0.18);

  /* --- TRANSITIONS --- */
  --tr-instant: 80ms ease;
  --tr-fast:    150ms ease;
  --tr-normal:  260ms ease;
  --tr-slow:    450ms ease;
  --tr-spring:  380ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- LAYOUT --- */
  --max-w:    1320px;
  --max-w-md: 860px;
  --max-w-sm: 580px;

  /* --- Z-INDEX --- */
  --z-base:    0;
  --z-above:   10;
  --z-sticky:  50;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-nav:     400;
}