/**
 * tokens.css
 * Core design tokens and CSS variable declarations.
 * Refactored for a futuristic 2100-era UI/UX layout in Brand Red & Black.
 *
 * @package Srushti_Theme
 */

:root {
  /* Base Backgrounds - Light Mode (High Contrast Stark Layout) */
  --color-void:       #FAFAFB;
  --color-midnight:   #FFFFFF;
  --color-surface-1:  #FFFFFF;
  --color-surface-2:  #F4F4F6;
  --color-surface-3:  #EDEDF1;

  /* Proper Brand Red & Black Tokens */
  --color-brand-red:         #CC0000;
  --color-brand-red-bright:  #FF1A1A;
  --color-brand-red-dim:     #880000;
  --color-brand-red-glow:    rgba(204, 0, 0, 0.08);
  --color-brand-black:       #0A0A0F;
  --color-brand-charcoal:    #111115;
  --color-brand-dark-grey:   #1C1C24;

  /* Proper Brand Gold Tokens (Used only in Dark Background Sections) */
  --color-brand-gold:        #C8973A;
  --color-brand-gold-bright: #E8B450;
  --color-brand-gold-dim:    #8A6020;
  --color-brand-gold-glow:   rgba(200, 151, 58, 0.25);
  
  /* Layout Telemetry Borders */
  --color-border-tech:       rgba(204, 0, 0, 0.15);
  --color-border-subtle:     rgba(11, 11, 14, 0.08);

  /* Legacy Aliases mapping directly to Brand Red & Black in Light Mode */
  --neon-gold:        var(--color-brand-red);
  --neon-gold-bright: var(--color-brand-red-bright);
  --neon-gold-dim:    var(--color-brand-red-dim);
  --neon-gold-glow:   var(--color-brand-red-glow);

  --neon-red:         var(--color-brand-red);
  --neon-red-bright:  var(--color-brand-red-bright);
  --neon-red-dim:     var(--color-brand-red-dim);
  --neon-red-glow:    var(--color-brand-red-glow);

  --neon-teal:        var(--color-brand-black);
  --neon-teal-bright: var(--color-brand-red-bright);
  --neon-teal-glow:   var(--color-brand-red-glow);

  /* Glass Effects - Sharp Technical Surfaces */
  --glass-base:        rgba(255, 255, 255, 0.75);
  --glass-hover:       rgba(255, 255, 255, 0.95);
  --glass-active:      rgba(255, 255, 255, 1);
  --glass-border:      rgba(10, 10, 15, 0.12);
  --glass-border-glow: rgba(204, 0, 0, 0.35);

  /* Backdrop Blur values */
  --blur-sm:  blur(2px);
  --blur-md:  blur(4px);
  --blur-lg:  blur(8px);
  --blur-xl:  blur(12px);

  /* Typography Colors - High Contrast */
  --text-primary:   #0B0B0E;
  --text-secondary: #3A3A42;
  --text-tertiary:  #6E6E77;
  --text-gold:      var(--color-brand-red);
  --text-red:       var(--color-brand-red);

  /* Font Families - Urbanist Display & Body */
  --font-display: 'Urbanist', sans-serif;
  --font-body:    'Urbanist', sans-serif;

  /* Spacing Scale (4px base) */
  --space-1:  4px;  
  --space-2:  8px;  
  --space-3:  12px;
  --space-4:  16px; 
  --space-5:  20px; 
  --space-6:  24px;
  --space-8:  32px; 
  --space-10: 40px; 
  --space-12: 48px;
  --space-16: 64px; 
  --space-20: 80px; 
  --space-24: 96px;
  --space-32: 128px;

  /* Border Radius Tokens - Futuristic 2100 Sharp Geometry (Block Modules) */
  --radius-xs:   0px;
  --radius-sm:   0px;
  --radius-md:   0px;
  --radius-lg:   0px;
  --radius-xl:   0px;
  --radius-pill: 0px;
  --radius-full: 50%;

  /* Motion Timing and Easing - Snappy and Precise */
  --duration-fast:    80ms;
  --duration-normal:  150ms;
  --duration-slow:    300ms;
  --duration-crawl:   500ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.1);

  /* Z-Index Hierarchy */
  --z-base:    0;
  --z-raise:   10;
  --z-float:   100;
  --z-sticky:  500;
  --z-nav:     1000;
  --z-modal:   2000;
  --z-toast:   3000;
  --z-loader:  9999;
}