/* =============================================
   SHARED (non-color) TOKENS — never theme-specific
   ============================================= */
:root {
  --font-mono: 'Courier New', Courier, monospace;

  --size-xs: 0.75rem;
  --size-sm: 0.875rem;
  --size-md: 1rem;
  --size-lg: 1.25rem;
  --size-xl: 1.75rem;
  --size-2xl: 2.5rem;
  --size-3xl: 3.5rem;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  --nav-height: 56px;
  --max-width: 1100px;
}

/* =============================================
   THEME: terminal  (default)
   Dark background, amber text, green accents
   ============================================= */
:root,
:root[data-theme="terminal"] {
  --color-bg:           #0a0a0a;
  --color-surface:      #111111;
  --color-surface-2:    #161616;
  --color-amber:        #ffb000;
  --color-amber-dim:    #a07000;
  --color-amber-glow:   rgba(255, 176, 0, 0.15);
  --color-green:        #39ff14;
  --color-green-dim:    #1a7a00;
  --color-dim:          #333333;
  --color-border:       #3a2e00;
  --color-text:         #d4a84b;
  --color-text-muted:   #7a6a3a;
  --color-error:        #ff3c3c;

  --glow-amber:  0 0 8px var(--color-amber), 0 0 16px rgba(255, 176, 0, 0.4);
  --glow-green:  0 0 8px var(--color-green), 0 0 16px rgba(57, 255, 20, 0.4);
  --glow-border: 0 0 6px rgba(255, 176, 0, 0.5);
}

/* =============================================
   THEME: amber
   Same palette as terminal, text lifted for readability
   ============================================= */
:root[data-theme="amber"] {
  --color-bg:           #0a0a0a;
  --color-surface:      #111111;
  --color-surface-2:    #161616;
  --color-amber:        #ffb000;
  --color-amber-dim:    #a07000;
  --color-amber-glow:   rgba(255, 176, 0, 0.15);
  --color-green:        #39ff14;
  --color-green-dim:    #1a7a00;
  --color-dim:          #333333;
  --color-border:       #3a2e00;
  --color-text:         #f2c860;
  --color-text-muted:   #a08040;
  --color-error:        #ff3c3c;

  --glow-amber:  0 0 8px var(--color-amber), 0 0 16px rgba(255, 176, 0, 0.4);
  --glow-green:  0 0 8px var(--color-green), 0 0 16px rgba(57, 255, 20, 0.4);
  --glow-border: 0 0 6px rgba(255, 176, 0, 0.5);
}

/* =============================================
   THEME: modern
   Dark slate background, blue/teal accents
   ============================================= */
:root[data-theme="modern"] {
  --color-bg:           #0f1117;
  --color-surface:      #1a1d27;
  --color-surface-2:    #21253a;
  --color-amber:        #4f8ef7;
  --color-amber-dim:    #2a4fa0;
  --color-amber-glow:   rgba(79, 142, 247, 0.15);
  --color-green:        #22d3a8;
  --color-green-dim:    #0f7a60;
  --color-dim:          #2a2d3e;
  --color-border:       #2a3055;
  --color-text:         #c9d1f5;
  --color-text-muted:   #6b78a8;
  --color-error:        #f87171;

  --glow-amber:  0 0 8px var(--color-amber), 0 0 16px rgba(79, 142, 247, 0.4);
  --glow-green:  0 0 8px var(--color-green), 0 0 16px rgba(34, 211, 168, 0.4);
  --glow-border: 0 0 6px rgba(79, 142, 247, 0.5);
}

/* =============================================
   THEME: bright
   Light background, blue/emerald accents
   ============================================= */
:root[data-theme="bright"] {
  --color-bg:           #f4f6fa;
  --color-surface:      #ffffff;
  --color-surface-2:    #eef1f8;
  --color-amber:        #2563eb;
  --color-amber-dim:    #1d4ed8;
  --color-amber-glow:   rgba(37, 99, 235, 0.08);
  --color-green:        #059669;
  --color-green-dim:    #047857;
  --color-dim:          #cbd5e1;
  --color-border:       #bfcde0;
  --color-text:         #1e293b;
  --color-text-muted:   #64748b;
  --color-error:        #dc2626;

  --glow-amber:  0 2px 8px rgba(37, 99, 235, 0.20);
  --glow-green:  0 2px 8px rgba(5, 150, 105, 0.20);
  --glow-border: 0 2px 6px rgba(37, 99, 235, 0.15);
}

/* =============================================
   THEME: neon
   Deep purple-black background, hot-pink / cyan accents
   ============================================= */
:root[data-theme="neon"] {
  --color-bg:           #08001a;
  --color-surface:      #0d0023;
  --color-surface-2:    #13002d;
  --color-amber:        #ff2d78;
  --color-amber-dim:    #8a0040;
  --color-amber-glow:   rgba(255, 45, 120, 0.15);
  --color-green:        #00f5ff;
  --color-green-dim:    #006a75;
  --color-dim:          #250050;
  --color-border:       #5a0085;
  --color-text:         #e8baff;
  --color-text-muted:   #8840b0;
  --color-error:        #ff4444;

  --glow-amber:  0 0 10px var(--color-amber), 0 0 20px rgba(255, 45, 120, 0.5);
  --glow-green:  0 0 10px var(--color-green), 0 0 20px rgba(0, 245, 255, 0.5);
  --glow-border: 0 0 8px rgba(255, 45, 120, 0.6);
}