/*-----------------------------------*\
  #VARIABLES
  Design tokens and CSS custom properties
\*-----------------------------------*/

:root {
  /* Animation timings */
  --transition-theme: all 0.3s ease;
  --animation-slow: 0.5s ease;
  --animation-normal: 0.3s ease;
  --animation-fast: 0.15s ease;

  /* Transition durations */
  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease-in-out;

  /* Typography - Font Families */
  --ff-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --ff-display-italic: 'Cormorant Garamond', Georgia, serif;
  --ff-body: 'Syne', system-ui, -apple-system, sans-serif;
  --ff-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Typography - Font Sizes */
  --fs-1: 24px;
  --fs-2: 18px;
  --fs-3: 17px;
  --fs-4: 16px;
  --fs-5: 15px;
  --fs-6: 14px;
  --fs-7: 13px;
  --fs-8: 11px;

  /* Typography - Font Weights */
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Animation presets */
  --fade-in: fade-in 0.5s ease forwards;
  --slide-up: slide-up 0.4s ease forwards;
  --scale-in: scale-in 0.3s ease forwards;
}

/*===================================*\
  LIGHT MODE - Warm Academic Parchment
\*===================================*/

:root,
:root[data-theme="light"] {
  /* Base surfaces */
  --bg: #faf9f6;
  --surface: #f5f3ed;
  --elevated: #ffffff;
  --border: #d4cfc4;
  --border-subtle: #e8e4dc;
  --muted: #6b5f4a;
  --text: #1a1a1a;
  --text-secondary: #4a4a4a;

  /* Accent colors - Deep Ocean Blue */
  --accent: #0369a1;
  --accent-hover: #0284c7;
  --accent-ink: #1e40af;
  --accent-weak: #e0f2fe;
  --accent-glow: rgba(3, 105, 161, 0.15);
  --accent-gradient: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
  --accent-secondary: #b45309;
  --accent-secondary-weak: rgba(180, 83, 9, 0.1);

  /* Tertiary accent - Coral Red (from CO oxidation spectra) */
  --accent-tertiary: #dc2626;
  --accent-tertiary-weak: rgba(220, 38, 38, 0.08);

  /* Semantic colors */
  --success: #059669;
  --success-weak: rgba(5, 150, 105, 0.1);
  --warning: #d97706;
  --error: #dc2626;

  /* Icon colors */
  --icon: #5c4b36;

  /* Legacy color mappings */
  --bg-gradient-onyx: linear-gradient(to bottom right, #f5f3ed 0%, #faf9f6 100%);
  --bg-gradient-jet: linear-gradient(to bottom right, rgba(245, 243, 237, 0.8) 0%, rgba(250, 249, 246, 0) 100%), #faf9f6;
  --border-gradient-onyx: linear-gradient(135deg, #d4cfc4 0%, rgba(212, 207, 196, 0.3) 100%);
  --text-gradient-yellow: linear-gradient(to right, #0369a1, #0284c7);

  /* Legacy names */
  --jet: #d4cfc4;
  --onyx: #f5f3ed;
  --eerie-black-1: #faf9f6;
  --eerie-black-2: #f5f3ed;
  --smoky-black: #ffffff;
  --white-1: #1a1a1a;
  --white-2: #2d2d2d;
  --orange-yellow-crayola: #0369a1;
  --vegas-gold: #b45309;
  --light-gray: #5c4b36;
  --bittersweet-shimmer: #dc2626;

  /* Shadows - warm and soft */
  --shadow-1: 0 1px 3px rgba(26, 26, 26, 0.06), 0 2px 8px rgba(26, 26, 26, 0.04);
  --shadow-2: 0 4px 12px rgba(26, 26, 26, 0.08), 0 2px 4px rgba(26, 26, 26, 0.04);
  --shadow-3: 0 8px 24px rgba(26, 26, 26, 0.1), 0 4px 8px rgba(26, 26, 26, 0.05);
  --shadow-4: 0 12px 32px rgba(26, 26, 26, 0.12), 0 6px 16px rgba(26, 26, 26, 0.08);
  --shadow-5: 0 20px 60px rgba(26, 26, 26, 0.15), 0 10px 30px rgba(26, 26, 26, 0.1);

  /* Glow effects */
  --glow-accent: 0 0 20px rgba(3, 105, 161, 0.3);
  --glow-accent-strong: 0 0 30px rgba(3, 105, 161, 0.4);
}

/*===================================*\
  DARK MODE - Molecular Observatory
\*===================================*/

:root[data-theme="dark"] {
  /* Base surfaces */
  --bg: #0a0e1a;
  --surface: #0f1428;
  --elevated: #151b38;
  --border: #253050;
  --border-subtle: #1e2845;
  --muted: #788aa8;
  --text: #e8ecf4;
  --text-secondary: #9aa5c1;

  /* Accent colors - Electric Cyan */
  --accent: #22d3ee;
  --accent-hover: #06b6d4;
  --accent-ink: #7dd3fc;
  --accent-weak: rgba(34, 211, 238, 0.12);
  --accent-glow: rgba(34, 211, 238, 0.2);
  --accent-gradient: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
  --accent-secondary: #fbbf24;
  --accent-secondary-weak: rgba(251, 191, 36, 0.15);

  /* Semantic colors */
  --success: #34d399;
  --success-weak: rgba(52, 211, 153, 0.15);
  --warning: #fbbf24;
  --error: #f87171;

  /* Icon colors */
  --icon: #94a3b8;

  /* Legacy color mappings */
  --bg-gradient-onyx: linear-gradient(to bottom right, #151b38 0%, #0a0e1a 100%);
  --bg-gradient-jet: linear-gradient(to bottom right, rgba(21, 27, 56, 0.7) 0%, rgba(10, 14, 26, 0) 100%), #0f1428;
  --border-gradient-onyx: linear-gradient(135deg, #253050 0%, rgba(37, 48, 80, 0.3) 100%);
  --text-gradient-yellow: linear-gradient(to right, #22d3ee, #06b6d4);

  /* Legacy names */
  --jet: #253050;
  --onyx: #151b38;
  --eerie-black-1: #0f1428;
  --eerie-black-2: #0a0e1a;
  --smoky-black: #050810;
  --white-1: #e8ecf4;
  --white-2: #f0f4fc;
  --orange-yellow-crayola: #22d3ee;
  --vegas-gold: #fbbf24;
  --light-gray: #94a3b8;
  --bittersweet-shimmer: #f87171;

  /* Shadows - deep and atmospheric */
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.7), 0 4px 8px rgba(0, 0, 0, 0.5);
  --shadow-4: 0 12px 32px rgba(0, 0, 0, 0.8), 0 6px 16px rgba(0, 0, 0, 0.6);
  --shadow-5: 0 20px 60px rgba(0, 0, 0, 0.9), 0 10px 30px rgba(0, 0, 0, 0.7);

  /* Glow effects */
  --glow-accent: 0 0 30px rgba(34, 211, 238, 0.4);
  --glow-accent-strong: 0 0 50px rgba(34, 211, 238, 0.5);
}