/* ==========================================================================
   Ruhrati theme tokens — single source of colour truth.
   Switch presets with `theme` in assets/js/config.js:
   "logo" (default) | "blue" | "orchid"
   ========================================================================== */

/* ---------- OPTION 1: LOGO (default) ---------- */
:root,
[data-theme="logo"] {
  color-scheme: dark;

  --ink: #0a0816;
  --surface: #0b0917;
  --elevated: #14102a;
  --text: #fbf8ff;
  --muted: #a9a3c2;
  --hairline: rgba(255, 255, 255, 0.08);
  --white: #ffffff;
  --black: #000000;

  --brand-primary: #b65cff;
  --brand-secondary: #ea8dff;
  --brand-tertiary: #6b3ffb;
  --brand-quad: #1b5cfe;
  --accent: #b65cff;
  --accent-alt: #1b5cfe;
  --danger: #ff7bad;

  --gradient: linear-gradient(100deg, #ea8dff 0%, #b65cff 30%, #6b3ffb 64%, #1b5cfe 100%);
  --gradient-highlight: linear-gradient(100deg, #ea8dff 0%, #8046fd 100%);
  --gradient-cta: linear-gradient(100deg, #9f3de8 0%, #3352fb 100%);
  --cta-fg: #ffffff;

  --glow-primary: 0 0 80px rgba(182, 92, 255, 0.35);
  --glow-secondary: 0 0 90px rgba(234, 141, 255, 0.2);

  --light-bg: #fbf8ff;
  --light-bg-2: #f4eeff;
  --light-card: #ffffff;
  --light-text: #0a0816;
  --light-muted: #5b5570;
  --light-line: rgba(10, 8, 22, 0.12);
  --light-highlight: linear-gradient(100deg, #7a2be2 0%, #3352fb 100%);
  --light-cta-a: #9f3de8;
  --light-cta-b: #3352fb;
  --light-cta-fg: #ffffff;

  --bg: var(--ink);
  --bg-2: var(--surface);
  --bg-3: var(--elevated);
  --fg: var(--text);
  --fg-muted: var(--muted);
  --line: var(--hairline);
  --card: rgba(255, 255, 255, 0.028);
  --card-strong: rgba(255, 255, 255, 0.05);
}

/* ---------- OPTION 2: BLUE ---------- */
[data-theme="blue"] {
  color-scheme: dark;

  --ink: #060b1f;
  --surface: #070c22;
  --elevated: #0c1638;
  --text: #fbf8ff;
  --muted: #a9a3c2;
  --hairline: rgba(255, 255, 255, 0.08);
  --white: #ffffff;
  --black: #000000;

  --brand-primary: #1b5cfe;
  --brand-secondary: #3d6bff;
  --brand-tertiary: #1b5cfe;
  --brand-quad: #d46bff;
  --accent: #d46bff;
  --accent-alt: #3d6bff;
  --danger: #ff7bad;

  --gradient: linear-gradient(100deg, #3d6bff 0%, #1b5cfe 58%, #d46bff 100%);
  --gradient-highlight: linear-gradient(100deg, #3d6bff 0%, #1b5cfe 100%);
  --gradient-cta: linear-gradient(100deg, #1b5cfe 0%, #1b5cfe 100%);
  --cta-fg: #ffffff;

  --glow-primary: 0 0 80px rgba(27, 92, 254, 0.38);
  --glow-secondary: 0 0 90px rgba(212, 107, 255, 0.2);

  --light-bg: #f6f9ff;
  --light-bg-2: #eaf0ff;
  --light-card: #ffffff;
  --light-text: #0a0816;
  --light-muted: #525b74;
  --light-line: rgba(6, 11, 31, 0.12);
  --light-highlight: linear-gradient(100deg, #1b5cfe 0%, #0b3bb8 100%);
  --light-cta-a: #1b5cfe;
  --light-cta-b: #1b5cfe;
  --light-cta-fg: #ffffff;

  --bg: var(--ink);
  --bg-2: var(--surface);
  --bg-3: var(--elevated);
  --fg: var(--text);
  --fg-muted: var(--muted);
  --line: var(--hairline);
  --card: rgba(255, 255, 255, 0.028);
  --card-strong: rgba(255, 255, 255, 0.05);
}

/* ---------- OPTION 3: ORCHID ---------- */
[data-theme="orchid"] {
  color-scheme: dark;

  --ink: #13061a;
  --surface: #14071b;
  --elevated: #230c2e;
  --text: #fbf8ff;
  --muted: #b3a5bd;
  --hairline: rgba(255, 255, 255, 0.08);
  --white: #ffffff;
  --black: #000000;

  --brand-primary: #d46bff;
  --brand-secondary: #e17bfb;
  --brand-tertiary: #a41cc8;
  --brand-quad: #3d6bff;
  --accent: #3d6bff;
  --accent-alt: #d46bff;
  --danger: #ff7bad;

  --gradient: linear-gradient(100deg, #e17bfb 0%, #d46bff 48%, #3d6bff 100%);
  --gradient-highlight: linear-gradient(100deg, #e17bfb 0%, #d46bff 100%);
  --gradient-cta: linear-gradient(100deg, #e17bfb 0%, #e17bfb 100%);
  --cta-fg: #13061a;

  --glow-primary: 0 0 80px rgba(212, 107, 255, 0.4);
  --glow-secondary: 0 0 90px rgba(61, 107, 255, 0.22);

  --light-bg: #fff8ff;
  --light-bg-2: #fbeffc;
  --light-card: #ffffff;
  --light-text: #0a0816;
  --light-muted: #62526a;
  --light-line: rgba(19, 6, 26, 0.12);
  --light-highlight: linear-gradient(100deg, #a41cc8 0%, #6d0f87 100%);
  --light-cta-a: #a41cc8;
  --light-cta-b: #a41cc8;
  --light-cta-fg: #ffffff;

  --bg: var(--ink);
  --bg-2: var(--surface);
  --bg-3: var(--elevated);
  --fg: var(--text);
  --fg-muted: var(--muted);
  --line: var(--hairline);
  --card: rgba(255, 255, 255, 0.028);
  --card-strong: rgba(255, 255, 255, 0.05);
}

/* ---------- Light reading surfaces ---------- */
.theme-light {
  color-scheme: light;

  --bg: var(--light-bg);
  --bg-2: var(--light-bg-2);
  --bg-3: var(--light-card);
  --fg: var(--light-text);
  --fg-muted: var(--light-muted);
  --line: var(--light-line);
  --hairline: var(--light-line);
  --card: rgba(10, 8, 22, 0.03);
  --card-strong: rgba(10, 8, 22, 0.055);

  --gradient-highlight: var(--light-highlight);
  --gradient-cta: linear-gradient(100deg, var(--light-cta-a) 0%, var(--light-cta-b) 100%);
  --cta-fg: var(--light-cta-fg);
  --danger: #b0004f;
}