/* ==========================================================================
   theme001: KRACER97 Sim Racing Official Theme
   Consistent Visual Identity with https://kracer97.com/
   ========================================================================== */

:root {
  --transition-speed: 0.2s;

  /* Layout dimensions */
  --header-height: 64px;
  --sidebar-width: 290px;
  --toc-width: 250px;
  --content-max-width: 900px;

  /* Typography matching kracer97.com */
  --font-sans: 'Outfit', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Outfit', 'Noto Sans KR', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  /* Elevation Shadows */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px 0 rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 28px 0 rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   Dark Theme (Default) - Matching kracer97.com Dark Sim Racing Style
   ========================================================================== */
[data-theme="dark"],
:root {
  --bg-primary: #0a0a0c;
  --bg-secondary: #0e1015;
  --bg-tertiary: #13151b;
  --bg-surface: #13151b;
  --bg-card: #16181f;
  --bg-hover: #1c1f28;
  --bg-active: #252a35;

  --text-primary: #f5f5f5;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --text-inverse: #0a0a0c;

  --border-color: #262626;
  --border-subtle: #191c24;

  /* Sim Racing Accent Colors */
  --primary-color: #ef4444;
  --primary-hover: #f87171;
  --primary-light: rgba(239, 68, 68, 0.12);
  --primary-text: #ef4444;

  --accent-color: #00f0ff;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --danger-color: #ef4444;

  --code-bg: #0b0c10;
  --code-border: #222631;
  --code-inline-bg: rgba(239, 68, 68, 0.12);
  --code-inline-text: #f87171;

  --ad-bg: #0e1015;
  --ad-border: #262626;
  --ad-text: #6b7280;

  --badge-bg: rgba(239, 68, 68, 0.15);
  --badge-text: #f87171;
  --badge-border: rgba(239, 68, 68, 0.3);
}

/* ==========================================================================
   Light Theme (Clean Studio Style)
   ========================================================================== */
[data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-tertiary: #e2e8f0;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #f1f5f9;
  --bg-active: #e2e8f0;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;

  --border-color: #e2e8f0;
  --border-subtle: #f1f5f9;

  --primary-color: #ef4444;
  --primary-hover: #dc2626;
  --primary-light: #fef2f2;
  --primary-text: #dc2626;

  --accent-color: #0284c7;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --danger-color: #ef4444;

  --code-bg: #f8fafc;
  --code-border: #e2e8f0;
  --code-inline-bg: #fef2f2;
  --code-inline-text: #ef4444;

  --ad-bg: #f8fafc;
  --ad-border: #cbd5e1;
  --ad-text: #94a3b8;

  --badge-bg: #fef2f2;
  --badge-text: #ef4444;
  --badge-border: #fecaca;
}

/* ==========================================================================
   Racing Color Tone Presets (Default: Red)
   ========================================================================== */
[data-color="red"],
:root {
  --primary-color: #ef4444;
  --primary-hover: #f87171;
  --primary-light: rgba(239, 68, 68, 0.12);
  --primary-text: #ef4444;
  --badge-bg: rgba(239, 68, 68, 0.15);
  --badge-text: #f87171;
}

[data-color="cyan"] {
  --primary-color: #00f0ff;
  --primary-hover: #7df4ff;
  --primary-light: rgba(0, 240, 255, 0.12);
  --primary-text: #00f0ff;
  --badge-bg: rgba(0, 240, 255, 0.15);
  --badge-text: #00f0ff;
}

[data-color="orange"] {
  --primary-color: #f97316;
  --primary-hover: #fb923c;
  --primary-light: rgba(249, 115, 22, 0.12);
  --primary-text: #f97316;
  --badge-bg: rgba(249, 115, 22, 0.15);
  --badge-text: #fb923c;
}