/* ============================================
   ELEVENIFIED DESIGN SYSTEM - CSS TOKENS
   Master Source for Color Variables
   ============================================ */

:root {
  /* Background (Eye Comfort in Low Light) */
  --bg-deep-slate: #1A1C20;
  --bg-rubber: #25282D;
  --bg-void: #0D0F12;
  --fg-primary: #FFFFFF;
  --bg-rubber-light: #2D3138;

  /* Darker Background for Gradients */

  /* Alias for backward compatibility */
  --deep-slate: var(--bg-deep-slate);

  /* Foreground */
  --foreground: #E8E8E8;
  --foreground-muted: #8A8D93;

  /* Safety & Status (Safety Neon) */
  --neon-volt: #39FF14;
  --neon-volt-dark: #2ECC40;
  --neon-volt-glow: rgba(57, 255, 20, 0.4);
  --electric-amber: #FFC000;
  --electric-amber-glow: rgba(255, 192, 0, 0.4);
  --industrial-red: #FF3333;
  --industrial-red-glow: rgba(255, 51, 51, 0.4);

  /* Borders */
  --border-industrial: #3A3E45;

  /* The "11" Accent (AI Synergy Gradient) */
  --synergy-blue: #00C9FF;
  --synergy-blue-dark: #0077B5;
  --synergy-blue-glow: rgba(0, 201, 255, 0.3);
  --synergy-gold: #FFD700;
  --synergy-gold-dark: #DAA520;
  --synergy-gold-glow: rgba(255, 215, 0, 0.3);

  /* Shadows for Tactile Depth */
  --shadow-highlight: rgba(255, 255, 255, 0.1);
  --shadow-dark: rgba(0, 0, 0, 0.8);
  --shadow-dark-deep: rgba(0, 0, 0, 0.9);

  /* Touch Targets */
  --touch-min: 72px;
  --touch-primary: 100px;

  /* Timing */
  --transition-fast: 150ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;

  /* Brand Identity (Gold → Blue → Green: Human + AI = Result) */
  --gradient-brand: linear-gradient(90deg, var(--synergy-gold) 0%, var(--synergy-blue) 40%, var(--neon-volt) 100%);

  /* Standard Component Gradients */
  --gradient-volt: linear-gradient(135deg, var(--neon-volt) 0%, var(--neon-volt-dark) 100%);
  --gradient-blue: linear-gradient(180deg, var(--synergy-blue) 0%, var(--synergy-blue-dark) 100%);
  --gradient-gold: linear-gradient(180deg, var(--synergy-gold) 0%, var(--synergy-gold-dark) 100%);
}

/* Helper classes that use the brand gradient */
.synergy-gradient {
  background: var(--gradient-brand);
}

.synergy-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}