/*
 * CSS Custom Properties — BlackLabel 47
 * Dark theme (default) + Light theme
 */

:root {
  /* === Dark Theme (default) === */
  --bg: #0a0a0a;
  --bg-surface: #141414;
  --text-primary: #d4d4d4;
  --text-secondary: #555555;
  --accent: #e87a1e;
  --accent-hover: #f08a2e;
  --accent-glow: rgba(232, 122, 30, 0.12);
  --border: #1e1e1e;
  --border-dot: #2a2a2a;
  --success: #4ade80;
  --error: #ef4444;
  --warning: #fbbf24;
  --selection-bg: rgba(232, 122, 30, 0.25);
  --highlight-bg: rgba(232, 122, 30, 0.08);

  /* === Typography === */
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  --font-size-base: 14px;
  --font-size-sm: 12px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-xxl: 24px;
  --line-height: 1.7;

  /* === Layout === */
  --terminal-padding: 24px;
  --max-width: 900px;

  /* === Transitions === */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;
}

/* === Light Theme === */
html.light {
  --bg: #f5f0e8;
  --bg-surface: #eae4da;
  --text-primary: #1a1a1a;
  --text-secondary: #8a7a6a;
  --accent: #e87a1e;
  --accent-hover: #d06c15;
  --accent-glow: rgba(232, 122, 30, 0.1);
  --border: #d5cfc5;
  --border-dot: #c5bfb5;
  --success: #16a34a;
  --error: #dc2626;
  --warning: #ca8a04;
  --selection-bg: rgba(232, 122, 30, 0.18);
  --highlight-bg: rgba(232, 122, 30, 0.06);
}

/* Smooth theme transitions */
html {
  transition: background-color var(--transition-normal);
}