/**
 * 🎨 baseLINE Design System — PCMedicalist Edition
 * Single source of truth for all design tokens.
 * Brand aligned to PCMedicalist-Branding-Guide (Space Grotesk / Inter / JetBrains Mono,
 * Diagnostic Blue → Cyber Purple, Void Black base).
 * ═══════════════════════════════════════════════════════════
 */

/* PCMedicalist brand fonts are imported via the JS entry (src/client/styles/entry.ts)
   so webpack emits the woff2 assets. No external CDN @import here. */

:root {
  /* ═══════════════════════════════════════════════════════════
     🎯 PCMEDICALIST BRAND PALETTE (from branding guide)
     ═══════════════════════════════════════════════════════════ */
  --color-brand-primary:   #00CFFF; /* Diagnostic Blue */
  --color-brand-secondary: #0A7CFF; /* System Blue (primary actions) */
  --color-brand-tertiary:  #12B5FF; /* Neural Blue */
  --color-brand-light:     #12B5FF; /* Neural Blue (hover/light alias) */
  --color-brand-accent:    #7A5CFF; /* Cyber Purple */
  --color-brand-accent-deep:#5E47E6; /* Accent Purple */
  --gradient-brand: linear-gradient(135deg, #00CFFF 0%, #7A5CFF 100%);

  /* 🌈 SEMANTIC (kept; brand-adjacent where sensible) */
  --color-accent-success: #10B981;
  --color-accent-warning: #F59E0B;
  --color-accent-critical: #EF4444;
  --color-accent-info:    #12B5FF;

  /* 🟦 BACKGROUND HIERARCHY (Void Black base) */
  --color-bg-darkest: #05070B; /* Void Black */
  --color-bg-darker:  #0A0F17; /* Deep Space */
  --color-bg-base:    #121821; /* Graphite Dark */
  --color-bg-surface: #121821;
  --color-bg-overlay: #102433; /* Steel Gray */
  --color-bg-hover:   #1A2A3A;

  /* Legacy dark aliases (kept so existing component refs keep working) */
  --color-dark-void:      #05070B;
  --color-dark-darkest:   #0A0F17;
  --color-dark-darker:    #121821;
  --color-dark-base:      #121821;
  --color-dark-surface:   #102433;
  --color-dark-overlay:   #1A2A3A;
  --color-dark-border:    #2A3A4A;
  --color-dark-border-legacy: #64748B;

  /* 📝 TEXT (Platinum / Chrome on Void Black) */
  --color-text-primary:   #E6EDF7; /* Platinum White */
  --color-text-secondary: #AABAC3; /* Chrome Silver */
  --color-text-tertiary:  #7D8A99;
  --color-text-muted:     #5B6675;

  /* ✨ GLASS MORPHISM (recolored border to Chrome Silver @ low alpha) */
  --glass-bg: rgba(10, 15, 23, 0.72);
  --glass-border: rgba(160, 186, 195, 0.12);
  --glass-backdrop: blur(16px) saturate(120%);
  --glass-shadow: 0 8px 32px -4px rgba(0, 207, 255, 0.10);

  /* 🔤 TYPOGRAPHY (PCMedicalist — Space Grotesk / Inter / JetBrains Mono) */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* 📏 FONT SIZES (kept) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-display: clamp(2.25rem, 5vw, 3.5rem);

  /* 📐 LINE HEIGHTS */
  --leading-tight: 1.2;
  --leading-normal: 1.6;

  /* 📐 SPACING (kept) */
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  /* 🔘 RADIUS (Enterprise Sharp) */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* 🎨 GRADIENTS */
  --gradient-primary: linear-gradient(135deg, #00CFFF 0%, #7A5CFF 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);

  /* 🎯 FOCUS (accessible brand ring) */
  --focus-ring: 0 0 0 2px #05070B, 0 0 0 4px var(--color-brand-primary);
  --duration-fast: 150ms;
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}