:root {
  /* --- DESIGN SYSTEM & VARIABLES --- */

  /* Primary Palette (Legacy/Shared) */
  --blue: #2A5D9C;
  /* Updated to match user accent */
  --blue-dim: rgba(42, 93, 156, 0.3);

  /* Light Theme (Default) */
  /* Light Theme (Paper-Like) */
  --accent: #2A5D9C;
  --accent-hover: #1e4575;
  --accent-soft: rgba(42, 93, 156, 0.12);
  --accent-bright: #2A5D9C;
  --accent-glow: rgba(42, 93, 156, 0.3);
  
  /* Warm "Old Paper" Background */
  --bg-body: #E2DFD6; 
  --bg-card: #E2DFD6;
  --bg-card-elevated: #EBE8DF; 
  --bg-code: #EBE8DF; /* Matching elevated card for code blocks */
  --bg-sidebar: #E2DFD6;
  --bg-header: #E2DFD6;

  /* Charcoal Text (Softer than black) */
  --text-main: #262626;
  --text-sub: #545454;
  --text-code: #262626;

  /* Organic Border Colors */
  --border: #CFCBC2;
  --border-sub: #D9D6CD;
  --border-nav: #D9D6CD;
  --grid-line: #D4D1C9;

  /* Visualization Colors */
  --viz-balanced-bg: #eafaf1;
  --viz-balanced-text: #27ae60;
  --viz-balanced-border: #27ae60;

  --viz-unbalanced-bg: #fdedec;
  --viz-unbalanced-text: #c0392b;
  --viz-unbalanced-border: #c0392b;

  --viz-active-bg: rgba(42, 93, 156, 0.1);
  --viz-active-border: #2A5D9C;
  --viz-active-text: #2A5D9C;

  --viz-node-bg: #E2DFD6;
  --viz-link: #ccc;

  /* Legacy Mappings for compatibility with existing base/components */
  --bg: var(--bg-body);
  --text-strong: var(--text-main);
  --text-muted: var(--text-sub);
  --border-subtle: var(--border);

  /* Typography */
  --font-heading: 'EB Garamond', serif;
  --font-body: 'EB Garamond', serif;
  --mono: 'JetBrains Mono', monospace;
  --serif: 'EB Garamond', serif;
  --tech: 'Share Tech Mono', monospace;

  /* Specific Problem Page Fonts */
  --font-serif: var(--serif);
  --font-mono-sys: var(--tech);
  --font-mono-code: var(--mono);
  --font-pixel: 'Press Start 2P', cursive;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Radii */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.15s ease-out;
  --transition-normal: 0.25s ease-out;
}

/* Dark Mode - System Preference OR Manual Toggle */
@media (prefers-color-scheme: dark) {
  :root {
    /* Default to User's Dark Palette if system prefers dark */
    /* Dark Theme (Terminal Style) */
    --accent: #5682B1;
    --accent-hover: #739EC9;
    --accent-soft: rgba(86, 130, 177, 0.2);
    --accent-bright: #739EC9;
    --accent-glow: rgba(86, 130, 177, 0.3);

    /* Pure Black Background */
    --bg-body: #000000; 
    --bg-card: #000000; 
    --bg-card-elevated: #0f0f0f;
    --bg-code: #0f0f0f;
    --bg-sidebar: #000000;
    --bg-header: #000000;

    /* Terminal Blue Text */
    --text-main: #6BA4D9; 
    --text-sub: #4A7091;
    --text-code: #6BA4D9;

    --border: #4A7091;
    --border-sub: #333333;
    --border-nav: #111111;
    --grid-line: #111111;

    /* Visualization Colors */
    --viz-balanced-bg: #05140a;
    --viz-balanced-text: #5682B1;
    --viz-balanced-border: #5682B1;

    --viz-unbalanced-bg: #1a0505;
    --viz-unbalanced-text: #739EC9;
    --viz-unbalanced-border: #739EC9;

    --viz-active-bg: #0d1a26;
    --viz-active-border: #739EC9;
    --viz-active-text: #739EC9;

    --viz-node-bg: #000000;
    --viz-link: #5682B1;

    /* Legacy Mappings */
    --bg: var(--bg-body);
    --text-strong: var(--text-main);
    --text-muted: var(--text-sub);
    --border-subtle: var(--border);
  }
}

/* Specific Override for Button Toggle */
/* Specific Override for Button Toggle */
[data-theme="dark"] {
  /* Dark Theme (Terminal Style) */
  --accent: #5682B1;
  --accent-hover: #739EC9;
  --accent-soft: rgba(86, 130, 177, 0.2);
  --accent-bright: #739EC9;
  --accent-glow: rgba(86, 130, 177, 0.3);

  /* Pure Black Background */
  --bg-body: #000000; 
  --bg-card: #000000; 
  --bg-card-elevated: #0f0f0f;
  --bg-code: #0f0f0f;
  --bg-sidebar: #000000;
  --bg-header: #000000;

  /* Terminal Blue Text */
  --text-main: #6BA4D9; 
  --text-sub: #4A7091;
  --text-code: #6BA4D9;

  --border: #4A7091;
  --border-sub: #333333;
  --border-nav: #111111;
  --grid-line: #111111;

  /* Visualization */
  --viz-balanced-bg: #000000;
  --viz-balanced-text: #4ade80;
  --viz-balanced-border: #4ade80;

  --viz-unbalanced-bg: #000000;
  --viz-unbalanced-text: #ef4444;
  --viz-unbalanced-border: #ef4444;

  --viz-active-bg: #0d1a26;
  --viz-active-border: #739EC9;
  --viz-active-text: #739EC9;

  --viz-node-bg: #000000;
  --viz-link: #5682B1;

  /* Legacy */
  --bg: var(--bg-body);
  --text-strong: var(--text-main);
  --text-muted: var(--text-sub);
  --border-subtle: var(--border);
}

[data-theme="light"] {
  /* Enforce light variables if manually selected even if system is dark */
  /* Light Theme (Paper-Like) */
  --accent: #2A5D9C;
  --accent-hover: #1e4575;
  --accent-soft: rgba(42, 93, 156, 0.12);
  --accent-bright: #2A5D9C;
  --accent-glow: rgba(42, 93, 156, 0.3);
  
  --bg-body: #E2DFD6; 
  --bg-card: #E2DFD6;
  --bg-card-elevated: #EBE8DF; 
  --bg-code: #EBE8DF;
  --bg-sidebar: #E2DFD6;
  --bg-header: #E2DFD6;

  --text-main: #262626;
  --text-sub: #545454;
  --text-code: #262626;
  
  --border: #CFCBC2;
  --border-sub: #D9D6CD;
  --border-nav: #D9D6CD;
  --grid-line: #D4D1C9;

  /* Visualization Colors (Force Light Mode) */
  --viz-balanced-bg: #eafaf1;
  --viz-balanced-text: #27ae60;
  --viz-balanced-border: #27ae60;

  --viz-unbalanced-bg: #fdedec;
  --viz-unbalanced-text: #c0392b;
  --viz-unbalanced-border: #c0392b;

  --viz-active-bg: rgba(42, 93, 156, 0.1);
  --viz-active-border: #2A5D9C;
  --viz-active-text: #2A5D9C;

  --viz-node-bg: #E2DFD6;
  --viz-link: #ccc;
}