:root {
  /* Colors */
  --bg-primary: #050508;
  --bg-secondary: rgba(18, 18, 26, 0.58);
  --bg-surface: rgba(26, 26, 46, 0.6);
  --bg-surface-hover: rgba(43, 43, 76, 0.8);
  
  --text-primary: #f0f0f5;
  --text-secondary: #8888aa;
  
  --accent-primary: #8a6cf5;
  --accent-primary-rgb: 138, 108, 245;
  --accent-secondary: #b2a9fe;
  --accent-glow: rgba(138, 108, 245, 0.4);
  
  --accent-gold: #fccb06;
  --accent-gold-rgb: 252, 203, 6;
  --danger: #ff4757;
  --danger-rgb: 255, 71, 87;
  --success: #2ecc71;

  /* Terminal theme (customisable plus tard via options) */
  --terminal-color: #bda0ff;
  --terminal-color-rgb: 189, 160, 255;
  --terminal-text: #ded2ff;
  --terminal-text-strong: #efe9ff;
  --terminal-muted: #c8b4ff;
  --terminal-bg: rgba(10, 8, 18, 0.82);
  --terminal-panel: rgba(12, 10, 22, 0.72);
  
  /* Typography */
  --font-mono: 'Cascadia Mono', 'Cascadia Code', 'JetBrains Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;
  --font-ui: 'Cascadia Mono', 'Cascadia Code', 'JetBrains Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;
  
  /* Layout constraints */
  --max-width: 1600px;
  --border-radius-base: 8px;
  --border-radius-lg: 16px;
  
  /* Transition durations */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
}

:root[data-app-theme="mauve"] {
  --accent-primary: #8a6cf5;
  --accent-primary-rgb: 138, 108, 245;
  --accent-secondary: #b2a9fe;
  --accent-glow: rgba(138, 108, 245, 0.4);
  --terminal-color: #bda0ff;
  --terminal-color-rgb: 189, 160, 255;
  --terminal-text: #ded2ff;
  --terminal-text-strong: #efe9ff;
  --terminal-muted: #c8b4ff;
}

:root[data-app-theme="sunrise"] {
  --accent-primary: #ff8c42;
  --accent-primary-rgb: 255, 140, 66;
  --accent-secondary: #ffc18f;
  --accent-glow: rgba(255, 140, 66, 0.36);
  --terminal-color: #ffd18a;
  --terminal-color-rgb: 255, 209, 138;
  --terminal-text: #ffe5c2;
  --terminal-text-strong: #fff0dd;
  --terminal-muted: #ffcf97;
}

:root[data-app-theme="matrix"] {
  --accent-primary: #35d266;
  --accent-primary-rgb: 53, 210, 102;
  --accent-secondary: #9effb8;
  --accent-glow: rgba(53, 210, 102, 0.35);
  --terminal-color: #7cff9c;
  --terminal-color-rgb: 124, 255, 156;
  --terminal-text: #b7ffcb;
  --terminal-text-strong: #ddffe7;
  --terminal-muted: #98f3b2;
}

:root[data-app-theme="ocean"] {
  --accent-primary: #3ea8ff;
  --accent-primary-rgb: 62, 168, 255;
  --accent-secondary: #9dd8ff;
  --accent-glow: rgba(62, 168, 255, 0.36);
  --terminal-color: #7dd8ff;
  --terminal-color-rgb: 125, 216, 255;
  --terminal-text: #bee9ff;
  --terminal-text-strong: #e2f5ff;
  --terminal-muted: #9ad9fb;
}

:root[data-app-theme="ember"] {
  --accent-primary: #ff5f5f;
  --accent-primary-rgb: 255, 95, 95;
  --accent-secondary: #ff9d9d;
  --accent-glow: rgba(255, 95, 95, 0.34);
  --terminal-color: #ff9f72;
  --terminal-color-rgb: 255, 159, 114;
  --terminal-text: #ffd7bf;
  --terminal-text-strong: #ffe8d8;
  --terminal-muted: #ffbe98;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-ui);
  /* The animated matrix/ASCII backdrop look will be managed in layout */
  background-image: radial-gradient(circle at center, #100f1a 0%, #050508 100%);
}

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: 0.05em;
}

.mono {
  font-family: var(--font-mono);
}