/* ============================================================
   ATTENTION DYNAMICS — Design Tokens
   ============================================================
   Centralized CSS custom properties powering the entire design
   system. All components reference these tokens exclusively.
   
   Color palette: dark-mode-first, infrastructure-oriented
   Typography: Space Grotesk / Inter / Space Mono
   ============================================================ */

:root {

  /* --------------------------------------------------------
     1. COLOR TOKENS
     -------------------------------------------------------- */

  /* Core backgrounds */
  --color-dark:           #0B1020;
  --color-dark-surface:   #0E152B;
  --color-dark-terminal:  #070B16;

  /* Accent palette */
  --color-blue:           #0066FF;
  --color-cyan:           #00C2FF;

  /* Neutrals */
  --color-white:          #E5E7EB;
  --color-pure-white:     #FFFFFF;
  --color-gray-dark:      #1F2937;
  --color-gray-light:     #9CA3AF;

  /* Glass / translucent surfaces */
  --glass-bg:             rgba(14, 21, 43, 0.55);
  --glass-border:         rgba(229, 231, 235, 0.05);
  --glass-bg-hover:       rgba(14, 21, 43, 0.65);

  /* Semantic colors */
  --color-success:        #27C93F;
  --color-warning:        #FFBD2E;
  --color-error:          #FF5F56;


  /* --------------------------------------------------------
     2. TYPOGRAPHY TOKENS
     -------------------------------------------------------- */

  --font-primary:   'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:      'Space Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;

  /* Type scale */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 15px;
  --text-md:   1.0rem;
  --text-lg:   1.05rem;
  --text-xl:   1.25rem;

  /* Line heights */
  --leading-tight:    1.1;
  --leading-snug:     1.2;
  --leading-normal:   1.55;
  --leading-relaxed:  1.6;
  --leading-loose:    1.65;

  /* Letter spacing */
  --tracking-tight:   -0.03em;
  --tracking-snug:    -0.02em;
  --tracking-normal:  0.01em;
  --tracking-wide:    0.03em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.18em;


  /* --------------------------------------------------------
     3. SPACING SCALE
     --------------------------------------------------------
     Consistent spatial rhythm across all components.
     Based on a 4px grid with key stops.
     -------------------------------------------------------- */

  --space-2xs:  4px;
  --space-xs:   8px;
  --space-sm:   12px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  80px;
  --space-5xl:  120px;
  --space-6xl:  160px;


  /* --------------------------------------------------------
     4. BORDER TOKENS
     -------------------------------------------------------- */

  --border-subtle:   1px solid rgba(229, 231, 235, 0.02);
  --border-panel:    1px solid rgba(229, 231, 235, 0.05);
  --border-active:   1px solid rgba(0, 194, 255, 0.12);
  --border-section:  1px solid rgba(229, 231, 235, 0.025);
  --border-dashed:   1px dashed rgba(229, 231, 235, 0.08);
  --border-dashed-subtle: 1px dashed rgba(229, 231, 235, 0.05);
  --border-blue:     1px solid rgba(0, 102, 255, 0.15);
  --border-cyan:     1px solid rgba(0, 194, 255, 0.12);


  /* --------------------------------------------------------
     5. SHADOW TOKENS
     -------------------------------------------------------- */

  --shadow-sm:       0 2px 8px rgba(7, 11, 22, 0.3);
  --shadow-md:       0 4px 16px rgba(7, 11, 22, 0.4);
  --shadow-lg:       0 8px 32px rgba(7, 11, 22, 0.5);
  --shadow-xl:       0 15px 40px rgba(7, 11, 22, 0.7);
  --shadow-inset:    inset 0 0 30px rgba(7, 11, 22, 0.9);
  --shadow-glow-blue: 0 0 15px rgba(0, 102, 255, 0.1);
  --shadow-glow-cyan: 0 0 15px rgba(0, 194, 255, 0.1);


  /* --------------------------------------------------------
     6. TRANSITION TOKENS
     -------------------------------------------------------- */

  --transition-smooth:  all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast:    all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow:    all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-expo:      cubic-bezier(0.16, 1, 0.3, 1);


  /* --------------------------------------------------------
     7. Z-INDEX SCALE
     --------------------------------------------------------
     Layered stacking context for predictable ordering.
     -------------------------------------------------------- */

  --z-base:       1;
  --z-content:    10;
  --z-overlay:    50;
  --z-nav:        100;
  --z-nav-toggle: 101;
  --z-dropdown:   200;
  --z-modal:      500;
  --z-toast:      900;


  /* --------------------------------------------------------
     8. CONTAINER WIDTH TOKENS
     -------------------------------------------------------- */

  --container-sm:  680px;
  --container-md:  960px;
  --container-lg:  1100px;
  --container-xl:  1200px;
  --container-hero: 780px;


  /* --------------------------------------------------------
     9. RADIUS TOKENS
     -------------------------------------------------------- */

  --radius-xs:  2px;
  --radius-sm:  3px;
  --radius-md:  4px;
  --radius-lg:  6px;
  --radius-full: 50%;


  /* --------------------------------------------------------
     10. GRID TOKENS
     -------------------------------------------------------- */

  --grid-bg-size:    80px;
  --grid-bg-opacity: 0.003;

}