/* ==========================================================
   Design tokens — change these values to re-color the site.
   Dark theme (default): blue --accent, gold --accent-2.
   Light theme: purple #7638B0 and its variants.
   ========================================================== */
:root {
  --bg: #070B14;
  --bg-2: #0B1220;
  --panel: rgba(18, 28, 49, 0.72);
  --panel-solid: #0F1829;
  --line: #1E2B47;
  --ink: #E8EEF9;
  --muted: #9BA8C2;
  --accent: #4F8FF0;
  --accent-text: #7FB0FF;
  --accent-ink: #07101F;
  --accent-hover: #579DFF;
  --accent-soft: rgba(79, 143, 240, 0.12);
  --accent-2: #E3B25A;
  --glow: rgba(79, 143, 240, 0.35);
  --danger: #FF8A8A;
  --gh-0: #161B22;
  --gh-1: #0E4429;
  --gh-2: #006D32;
  --gh-3: #26A641;
  --gh-4: #39D353;
  --header-bg: rgba(7, 11, 20, 0.78);
  --door: #2F6FD6;
  --portrait-a: #3563C2;
  --portrait-b: #9FC0F7;
  --portrait-glow: rgba(227, 178, 90, 0.55);
  --radius: 8px;
  --display: "Space Grotesk", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: dark;

  /* Purple scale built around the brand colour #7638B0 (used by the light theme) */
  --purple-50: #F6EEFB;
  --purple-100: #EFE4F8;
  --purple-200: #DCC4F0;
  --purple-300: #C29BE3;
  --purple-400: #9C62CC;
  --purple-500: #7638B0;
  --purple-600: #5F2A93;
  --purple-700: #4A2073;
  --purple-800: #371757;
  --purple-900: #250E3B;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  --bg: #FAF7FD;
  --bg-2: #F1EAF9;
  --panel: rgba(255, 255, 255, 0.88);
  --panel-solid: #FFFFFF;
  --line: #E1D5EF;
  --ink: #1E1030;
  --muted: #5F5073;
  --accent: #7638B0;
  --accent-text: #7638B0;
  --accent-ink: #FFFFFF;
  --accent-hover: #5F2A93;
  --accent-soft: #EFE4F8;
  --accent-2: #8A5C08;
  --glow: rgba(118, 56, 176, 0.18);
  --danger: #B42318;
  --gh-0: #EBEDF0;
  --gh-1: #9BE9A8;
  --gh-2: #40C463;
  --gh-3: #30A14E;
  --gh-4: #216E39;
  --header-bg: rgba(250, 247, 253, 0.86);
  --door: #7638B0;
  --portrait-a: #6A2FA0;
  --portrait-b: #CDA8EA;
  --portrait-glow: rgba(240, 196, 110, 0.55);
  color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg: #FAF7FD;
  --bg-2: #F1EAF9;
  --panel: rgba(255, 255, 255, 0.88);
  --panel-solid: #FFFFFF;
  --line: #E1D5EF;
  --ink: #1E1030;
  --muted: #5F5073;
  --accent: #7638B0;
  --accent-text: #7638B0;
  --accent-ink: #FFFFFF;
  --accent-hover: #5F2A93;
  --accent-soft: #EFE4F8;
  --accent-2: #8A5C08;
  --glow: rgba(118, 56, 176, 0.18);
  --danger: #B42318;
  --gh-0: #EBEDF0;
  --gh-1: #9BE9A8;
  --gh-2: #40C463;
  --gh-3: #30A14E;
  --gh-4: #216E39;
  --header-bg: rgba(250, 247, 253, 0.86);
  --door: #7638B0;
  --portrait-a: #6A2FA0;
  --portrait-b: #CDA8EA;
  --portrait-glow: rgba(240, 196, 110, 0.55);
  color-scheme: light;
}