/**
 * @fileoverview Canon Evnt Design System - Master Tokens
 * @description Establishes the global CSS Custom Properties (variables) defining
 * the platform's visual identity, typography, transition speeds, and glassmorphism.
 * Harmonized with the corporate logo base (#000C23) and neon cyber spectrum.
 */

:root {
  /* ==========================================================================
     1. COLOR SYSTEM
     ========================================================================== */

  /* --- Background Voids (Midnight / Deep Navy Palette) --- */
  --bg-primary: hsl(220, 100%, 7%);       /* Pure midnight navy from logo base (#000C23) */
  --bg-secondary: hsl(220, 80%, 11%);    /* Lighter card background navy for elevation layering */
  --bg-tertiary: hsl(220, 60%, 15%);     /* High-contrast element background navy for inputs */
  
  /* --- Typography Grayscale (High Contrast & Readability) --- */
  --text-primary: hsl(210, 20%, 98%);     /* Bright off-white for primary body and headings */
  --text-secondary: hsl(210, 15%, 70%);   /* Soft gray-blue for secondary details and captions */
  --text-muted: hsl(210, 10%, 45%);       /* Dimmed gray-blue for placeholders and inactive items */
  
  /* --- Cyber Accents (Vibrant Spectrum from Logo Gradients) --- */
  --color-accent: hsl(202, 100%, 58%);    /* Electric Blue/Cyan (#1795FF) - Primary focus */
  --color-accent-glow: hsla(202, 100%, 58%, 0.15); /* Light glow opacity for shadows and borders */
  --color-accent-secondary: hsl(305, 78%, 56%); /* Fuchsia/Magenta (#E836D9) - Secondary callouts */
  --color-accent-secondary-glow: hsla(305, 78%, 56%, 0.15);
  
  /* --- Warm Highlights (Sunset Gradients) --- */
  --color-warm: hsl(14, 95%, 55%);        /* Deep Coral/Orange (#FE6130) - Alert/Interactive */
  --color-warm-glow: hsla(14, 95%, 55%, 0.15);
  
  /* --- Semantic Feedback States --- */
  --color-success: hsl(145, 65%, 45%);    /* Bright green for successful syncs and submissions */
  --color-error: hsl(355, 75%, 50%);      /* Vivid red for connection losses or failed inputs */
  
  /* ==========================================================================
     2. GRADIENTS (Logo Vector Spectrums)
     ========================================================================== */
  --gradient-brand: linear-gradient(135deg, hsl(202, 100%, 58%) 0%, hsl(305, 78%, 56%) 100%);
  --gradient-brand-glow: linear-gradient(135deg, hsla(202, 100%, 58%, 0.15) 0%, hsla(305, 78%, 56%, 0.15) 100%);
  --gradient-accent-warm: linear-gradient(135deg, hsl(14, 95%, 55%) 0%, hsl(45, 95%, 50%) 100%);
  
  /* ==========================================================================
     3. GLASSMORPHISM TOKENS
     ========================================================================== */
  --glass-bg: hsla(220, 80%, 11%, 0.7);   /* Translucent background for backdrop filters */
  --glass-border: hsla(210, 20%, 98%, 0.08); /* Micro-border for frosted glass depth */
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); /* Drop shadow to elevate cards */
  
  /* ==========================================================================
     4. TYPOGRAPHY
     ========================================================================== */
  --font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* ==========================================================================
     5. TRANSITIONS & MOTION
     ========================================================================== */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Standard ease for state changes */
  --transition-bounce: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Playful spring for buttons */
}