/* Theme variables - Light and Dark modes */

:root {
  /* Light theme (default) */
  --bg: #fafafa;
  --bg-sunken: #f0f0f0;
  --bg-card: #ffffff;
  --bg-overlay: rgba(0, 0, 0, 0.05);

  --text: #3d3d3d;
  --text-high: #1a1a1a;
  --text-medium: #555555;
  --text-low: #888888;

  --border: #e0e0e0;
  --border-light: #eeeeee;

  --brand: #6366f1;
  --brand-hover: #4f46e5;
  --brand-subtle: rgba(99, 102, 241, 0.1);

  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;

  /* Code block colors (light) */
  --code-bg: #1e1e2e;
  --code-text: #cdd6f4;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] {
  /* Dark theme */
  --bg: #0f0f0f;
  --bg-sunken: #1a1a1a;
  --bg-card: #171717;
  --bg-overlay: rgba(255, 255, 255, 0.05);

  --text: #d4d4d4;
  --text-high: #f5f5f5;
  --text-medium: #a3a3a3;
  --text-low: #737373;

  --border: #2a2a2a;
  --border-light: #333333;

  --brand: #818cf8;
  --brand-hover: #a5b4fc;
  --brand-subtle: rgba(129, 140, 248, 0.15);

  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;

  /* Code block colors (dark) */
  --code-bg: #1e1e2e;
  --code-text: #cdd6f4;

  /* Shadows (subtle in dark mode) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
}

/* Code block theme switching */
.code-block__light { display: block; }
.code-block__dark { display: none; }

[data-theme="dark"] .code-block__light { display: none; }
[data-theme="dark"] .code-block__dark { display: block; }

/* System preference detection (fallback when no explicit theme set) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .code-block__light { display: none; }
  :root:not([data-theme="light"]) .code-block__dark { display: block; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f0f0f;
    --bg-sunken: #1a1a1a;
    --bg-card: #171717;
    --bg-overlay: rgba(255, 255, 255, 0.05);

    --text: #d4d4d4;
    --text-high: #f5f5f5;
    --text-medium: #a3a3a3;
    --text-low: #737373;

    --border: #2a2a2a;
    --border-light: #333333;

    --brand: #818cf8;
    --brand-hover: #a5b4fc;
    --brand-subtle: rgba(129, 140, 248, 0.15);

    --success: #34d399;
    --warning: #fbbf24;
    --danger: #f87171;

    --code-bg: #1e1e2e;
    --code-text: #cdd6f4;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  }
}