/* ==========================================================================
   BartRockLabs Design Tokens
   ---------------------------------------------------------------------------
   Dark, technical, military-inspired "war panel" aesthetic.
   Glassmorphism used subtly for depth and layering.

   Usage: reference these custom properties throughout component styles.
   This file contains ONLY design tokens — no element styles.
   ========================================================================== */

:root {

  /* ========================================================================
     Colors — Backgrounds
     ======================================================================== */
  --color-bg-primary:   #0B1829;
  --color-bg-secondary: #0F1F33;
  --color-bg-card:      rgba(17, 24, 39, 0.8);
  --color-bg-glass:     rgba(17, 24, 39, 0.6);

  /* ========================================================================
     Colors — Borders
     ======================================================================== */
  --color-border:       rgba(55, 65, 81, 0.5);
  --color-border-hover: rgba(75, 85, 99, 0.8);

  /* ========================================================================
     Colors — Text
     ======================================================================== */
  --color-text-primary:   #F9FAFB;
  --color-text-secondary: #9CA3AF;
  --color-text-muted:     #6B7280;

  /* ========================================================================
     Colors — Accents
     ======================================================================== */
  --color-accent-cyan:   #00BFFF;  /* Primary accent            */
  --color-accent-gold:   #D4A017;  /* Secondary accent           */
  --color-accent-green:  #10B981;  /* Bullish / healthy          */
  --color-accent-red:    #EF4444;  /* Bearish / broken           */
  --color-accent-amber:  #F59E0B;  /* Degraded / warning         */
  --color-accent-purple: #8B5CF6;  /* Premium / highlight        */

  /* ========================================================================
     Typography — Font Families
     ======================================================================== */
  --font-display: 'Space Grotesk', sans-serif;   /* Headings       */
  --font-body:    'Inter', sans-serif;            /* Body text      */
  --font-mono:    'JetBrains Mono', monospace;    /* Data / code    */

  /* ========================================================================
     Typography — Font Sizes
     ======================================================================== */
  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-lg:   1.125rem;  /* 18px */
  --fs-xl:   1.25rem;   /* 20px */
  --fs-2xl:  1.5rem;    /* 24px */
  --fs-3xl:  1.875rem;  /* 30px */
  --fs-4xl:  2.5rem;    /* 40px */

  /* ========================================================================
     Typography — Font Weights
     ======================================================================== */
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ========================================================================
     Spacing Scale
     ======================================================================== */
  --space-1:   0.25rem;  /*  4px */
  --space-2:   0.5rem;   /*  8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-20:  5rem;     /* 80px */

  /* ========================================================================
     Layout
     ======================================================================== */
  --container-max: 1200px;
  --nav-height:    64px;

  /* ========================================================================
     Border Radius
     ======================================================================== */
  --border-radius-sm:   4px;
  --border-radius-md:   8px;
  --border-radius-lg:   12px;
  --border-radius-xl:   16px;
  --border-radius-full: 9999px;

  /* ========================================================================
     Shadows
     ======================================================================== */
  --shadow-sm:  0 1px 2px  rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 6px  rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 10px 24px rgba(0, 0, 0, 0.5);

  --shadow-glow-cyan: 0 0 20px rgba(0, 191, 255, 0.25);
  --shadow-glow-gold: 0 0 20px rgba(212, 160, 23, 0.25);

  /* ========================================================================
     Transitions
     ======================================================================== */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 500ms ease;

  /* ========================================================================
     Glass Effects (Glassmorphism)
     ======================================================================== */
  --glass-blur:   20px;
  --glass-bg:     rgba(11, 24, 41, 0.7);
  --glass-border: rgba(255, 255, 255, 0.08);

  /* ========================================================================
     Light Section Colors (for trust-building sections)
     ======================================================================== */
  --color-bg-light:              #F7F8FA;
  --color-bg-light-alt:          #F3F4F6;
  --color-text-on-light:         #0F172A;
  --color-text-secondary-on-light: #475569;
  --color-text-muted-on-light:   #64748B;
  --color-border-on-light:       rgba(15, 23, 42, 0.08);
  --color-card-on-light:         #FFFFFF;
  --color-card-border-on-light:  rgba(15, 23, 42, 0.06);

  /* ========================================================================
     Z-Index Scale
     ======================================================================== */
  --z-behind:   -1;
  --z-base:      0;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
}

/* ==========================================================================
   Accessibility — Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms ease;
    --transition-base: 0ms ease;
    --transition-slow: 0ms ease;
  }
}