/* Bizarre Dockyard — Design Tokens */
/* JoJo's Bizarre Adventure inspired palette */
/* Light mode is default */

:root {
  /* --- Light Mode Colors --- */
  --bg-primary: #f8f5f0;
  --bg-secondary: #ffffff;
  --bg-tertiary: #ede6da;
  --border: #c9b8a8;
  --border-active: #9b7eb4;
  --text-primary: #1a0a2e;
  --text-secondary: #4a3f5c;
  --text-muted: #8a7a9a;
  --accent-green: #7b2d8e;
  --accent-amber: #d4a017;
  --accent-cyan: #0e8585;
  --accent-red: #c62b4a;
  --code-bg: #120a24;
  --code-text: #e8d5f5;
  --card-shadow: 0 1px 3px rgba(26, 10, 46, 0.08);
  --card-shadow-hover: 0 4px 16px rgba(123, 45, 142, 0.15);

  /* --- Typography --- */
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

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

  /* --- Layout --- */
  --max-width: 1200px;
  --content-width: 680px;
  --header-height: 56px;
  --border-radius: 2px;

  /* --- Transitions --- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.3s ease;
}

/* --- Dark Mode --- */
[data-theme="dark"] {
  --bg-primary: #0d0a18;
  --bg-secondary: #15102a;
  --bg-tertiary: #201840;
  --border: #3a2860;
  --border-active: #6b3fa0;
  --text-primary: #ede0f5;
  --text-secondary: #a088c0;
  --text-muted: #6a5888;
  --accent-green: #c77dff;
  --accent-amber: #ffd700;
  --accent-cyan: #00e5d0;
  --accent-red: #ff4466;
  --code-bg: #0a0818;
  --code-text: #e8d5f5;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --card-shadow-hover: 0 4px 20px rgba(199, 125, 255, 0.2);
}

/* Respect OS preference when no explicit choice */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg-primary: #0d0a18;
    --bg-secondary: #15102a;
    --bg-tertiary: #201840;
    --border: #3a2860;
    --border-active: #6b3fa0;
    --text-primary: #ede0f5;
    --text-secondary: #a088c0;
    --text-muted: #6a5888;
    --accent-green: #c77dff;
    --accent-amber: #ffd700;
    --accent-cyan: #00e5d0;
    --accent-red: #ff4466;
    --code-bg: #0a0818;
    --code-text: #e8d5f5;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    --card-shadow-hover: 0 4px 20px rgba(199, 125, 255, 0.2);
  }
}