/* CSS Custom Properties for Theming */

:root {
  /* Spacing System */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* Typography Scale */
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 3rem;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Layout */
  --container-padding: 1.5rem;
  --container-max-width: 800px;
  --border-radius: 0.5rem;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Z-index */
  --z-header: 100;
  --z-overlay: 200;
}

/* Terminal Theme (Default) */
:root,
[data-theme="terminal"] {
  --bg-primary: #0a0a0a;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #2a2a2a;

  --text-primary: #00ff00;
  --text-secondary: #00cc00;
  --text-muted: #808080;

  --accent: #ffff00;
  --accent-dim: #cccc00;

  --border-color: #333333;
  --hover-bg: rgba(0, 255, 0, 0.1);

  --link-color: #00ff00;
  --link-hover: #00cc00;
}

/* Dracula Theme */
[data-theme="dracula"] {
  --bg-primary: #282a36;
  --bg-secondary: #363849;
  --bg-tertiary: #44475a;

  --text-primary: #f8f8f2;
  --text-secondary: #bd93f9;
  --text-muted: #6272a4;

  --accent: #ff79c6;
  --accent-dim: #ff92d0;

  --border-color: #44475a;
  --hover-bg: rgba(189, 147, 249, 0.1);

  --link-color: #8be9fd;
  --link-hover: #ff79c6;
}

/* Nord Theme */
[data-theme="nord"] {
  --bg-primary: #2e3440;
  --bg-secondary: #3b4252;
  --bg-tertiary: #434c5e;

  --text-primary: #eceff4;
  --text-secondary: #88c0d0;
  --text-muted: #4c566a;

  --accent: #88c0d0;
  --accent-dim: #81a1c1;

  --border-color: #434c5e;
  --hover-bg: rgba(136, 192, 208, 0.1);

  --link-color: #88c0d0;
  --link-hover: #81a1c1;
}

/* Light Theme */
[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #e5e5e5;

  --text-primary: #1a1a1a;
  --text-secondary: #404040;
  --text-muted: #808080;

  --accent: #ff6b35;
  --accent-dim: #ff8555;

  --border-color: #d0d0d0;
  --hover-bg: rgba(255, 107, 53, 0.1);

  --link-color: #0066cc;
  --link-hover: #004c99;
}

/* Crimson Theme */
[data-theme="crimson"] {
  --bg-primary: #780000;
  --bg-secondary: #c1121f;
  --bg-tertiary: #9d0208;

  --text-primary: #fdf0d5;
  --text-secondary: #669bbc;
  --text-muted: #003049;

  --accent: #669bbc;
  --accent-dim: #003049;

  --border-color: #c1121f;
  --hover-bg: rgba(102, 155, 188, 0.1);

  --link-color: #669bbc;
  --link-hover: #fdf0d5;
}

/* Fire Theme */
[data-theme="fire"] {
  --bg-primary: #03071e;
  --bg-secondary: #370617;
  --bg-tertiary: #6a040f;

  --text-primary: #ffba08;
  --text-secondary: #faa307;
  --text-muted: #dc2f02;

  --accent: #f48c06;
  --accent-dim: #e85d04;

  --border-color: #9d0208;
  --hover-bg: rgba(244, 140, 6, 0.1);

  --link-color: #faa307;
  --link-hover: #ffba08;
}

/* Monochrome Theme */
[data-theme="monochrome"] {
  --bg-primary: #212529;
  --bg-secondary: #343a40;
  --bg-tertiary: #495057;

  --text-primary: #f8f9fa;
  --text-secondary: #dee2e6;
  --text-muted: #adb5bd;

  --accent: #e9ecef;
  --accent-dim: #ced4da;

  --border-color: #495057;
  --hover-bg: rgba(233, 236, 239, 0.1);

  --link-color: #dee2e6;
  --link-hover: #f8f9fa;
}

/* Rainbow Theme */
[data-theme="rainbow"] {
  --bg-primary: #1a1a2e;
  --bg-secondary: #16213e;
  --bg-tertiary: #0f3460;

  --text-primary: #ffca3a;
  --text-secondary: #8ac926;
  --text-muted: #6a4c93;

  --accent: #ff595e;
  --accent-dim: #ffca3a;

  --border-color: #1982c4;
  --hover-bg: rgba(255, 89, 94, 0.1);

  --link-color: #1982c4;
  --link-hover: #8ac926;
}

/* Smooth transitions for theme changes */
body {
  transition: background-color var(--transition-base),
    color var(--transition-base);
}

* {
  transition: background-color var(--transition-base),
    color var(--transition-base), border-color var(--transition-base);
}