/* ==========================================================================
   DESIGN TOKENS & SYSTEM VARIABLES
   Oluwaferanmi Oladepo | Academic Technologist Portfolio
   Palette: Scholar's Navy & Electric Sapphire Blue
   ========================================================================== */

:root {
  /* Color Palette - Light Theme (Default) */
  --surface: #f8fafc;
  --surface-dim: #e2e8f0;
  --surface-bright: #ffffff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f1f5f9;
  --surface-container: #e2e8f0;
  --surface-container-high: #cbd5e1;
  --surface-container-highest: #94a3b8;
  --surface-variant: #e2e8f0;
  --surface-tint: #1e3a8a;

  --on-surface: #0f172a;
  --on-surface-variant: #334155;
  --inverse-surface: #0f172a;
  --inverse-on-surface: #f8fafc;

  /* Primary Scholar's Navy */
  --primary: #0a192f;
  --on-primary: #ffffff;
  --primary-container: #0d2149;
  --on-primary-container: #93c5fd;
  --primary-fixed: #dbeafe;
  --primary-fixed-dim: #bfdbfe;
  --inverse-primary: #93c5fd;

  /* Secondary Accent - Electric Navy / Cobalt Blue */
  --secondary: #1d4ed8;           /* Deep Vibrant Royal Blue */
  --secondary-light: #3b82f6;     /* Electric Cobalt */
  --secondary-dark: #1e3a8a;      /* Deep Navy */
  --on-secondary: #ffffff;
  --secondary-container: #2563eb;
  --on-secondary-container: #ffffff;
  --secondary-fixed: #dbeafe;
  --secondary-fixed-dim: #bfdbfe;
  --secondary-glow: rgba(37, 99, 235, 0.28);

  --tertiary: #475569;            /* Slate Grey */
  --tertiary-container: #0f172a;
  --on-tertiary: #ffffff;

  --outline: #64748b;
  --outline-variant: #cbd5e1;
  --outline-light: rgba(30, 58, 138, 0.12);

  --glass-bg: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(37, 99, 235, 0.18);
  --glass-shadow: 0 10px 35px 0 rgba(10, 25, 47, 0.08);

  --grid-line-color: rgba(30, 58, 138, 0.14);
  --card-glow: rgba(37, 99, 235, 0.16);

  /* Typography */
  --font-serif: 'Libre Caslon Text', Georgia, serif;
  --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing */
  --spacing-base: 8px;
  --spacing-section: clamp(40px, 6vw, 90px);
  --container-max: 1400px;
  --header-height: 100px;

  /* Transitions */
  --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark Theme Overrides */
html.dark {
  --surface: #060b13;
  --surface-dim: #03060a;
  --surface-bright: #0d1522;
  --surface-container-lowest: #090f1a;
  --surface-container-low: #0f1726;
  --surface-container: #152033;
  --surface-container-high: #1c2b44;
  --surface-container-highest: #283b5c;
  --surface-variant: #1c2b44;

  --on-surface: #f1f5f9;
  --on-surface-variant: #94a3b8;
  --inverse-surface: #f8fafc;
  --inverse-on-surface: #0f172a;

  --primary: #f8fafc;
  --on-primary: #0a192f;
  --primary-container: #1e3a8a;
  --on-primary-container: #bfdbfe;

  --secondary: #3b82f6;           /* Bright Electric Blue */
  --secondary-light: #60a5fa;
  --secondary-dark: #1d4ed8;
  --secondary-glow: rgba(59, 130, 246, 0.35);

  --outline: #64748b;
  --outline-variant: #1e293b;
  --outline-light: rgba(59, 130, 246, 0.16);

  --glass-bg: rgba(9, 15, 26, 0.85);
  --glass-border: rgba(59, 130, 246, 0.2);
  --glass-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.6);

  --grid-line-color: rgba(59, 130, 246, 0.13);
  --card-glow: rgba(59, 130, 246, 0.25);
}