/* ============================================================================
   tcgebinder shared design tokens — the SINGLE SOURCE for the site's core
   palette, overlays, text emphasis, fonts and accent glows.

   Consumed by BOTH roofs of the site:
     - the SPA: index.html links this file BEFORE styles.css (styles.css keeps
       only its page/feature-specific variables and references these tokens);
     - the play surface: /play pages (public/play/*) link this file first and
       build their theme on it (public/play/site-theme.css);
     - public/site-header.js reads these tokens with self-contained fallbacks,
       so it still renders on any page that forgot to link this file.

   Every value here was EXTRACTED verbatim from styles.css (Preset D — "Neon
   Cardboard"); do not redefine any of these names elsewhere — edit them here.
   ========================================================================== */
:root {
  --color-primary: #0A0A14; /* Deep Void */
  --color-accent: #7B61FF; /* Plasma */
  --color-accent-hover: #9681ff;
  --color-accent-light: #a19bff;
  --color-accent-warm: #ffd54a;
  --color-accent-green: #5ccf6a;
  --color-accent-green-dark: #3d8b52;
  --color-accent-blue: #4aa3ff;
  --color-accent-partial: #ffc107;
  --color-accent-unowned: #dc2626;
  --color-holo-pink: #ff8fcf;
  --color-bg: #F0EFF4; /* Ghost */
  --color-text: #18181B; /* Graphite */
  --color-white: #ffffff;
  --color-link: #4a90e2;
  --color-link-glow: rgba(74, 144, 226, 0.3);
  --color-select-option-bg: #1a1a2e;
  --color-danger: #b00020;
  --color-danger-hover: #c62828;
  --color-warning: #e69500;

  --color-surface: rgba(24, 24, 27, 0.6);
  --color-surface-hover: rgba(24, 24, 27, 0.8);
  --color-border: rgba(123, 97, 255, 0.3);
  /* Semi-transparent white layers for UI on dark surfaces */
  --color-overlay-4: rgba(255, 255, 255, 0.04);
  --color-overlay-5: rgba(255, 255, 255, 0.05);
  --color-overlay-8: rgba(255, 255, 255, 0.08);
  --color-overlay-10: rgba(255, 255, 255, 0.1);
  --color-overlay-12: rgba(255, 255, 255, 0.12);
  --color-overlay-15: rgba(255, 255, 255, 0.15);
  --color-overlay-20: rgba(255, 255, 255, 0.2);
  --color-overlay-30: rgba(255, 255, 255, 0.3);
  --color-overlay-35: rgba(255, 255, 255, 0.35);
  --color-overlay-40: rgba(255, 255, 255, 0.4);
  --color-overlay-45: rgba(255, 255, 255, 0.45);
  --color-overlay-50: rgba(255, 255, 255, 0.5);
  --color-overlay-60: rgba(255, 255, 255, 0.6);
  --color-overlay-65: rgba(255, 255, 255, 0.65);
  --color-overlay-70: rgba(255, 255, 255, 0.7);
  --color-overlay-80: rgba(255, 255, 255, 0.8);
  /* Text emphasis levels on dark surfaces */
  --color-text-dim: rgba(255, 255, 255, 0.75);
  --color-text-subtle: rgba(255, 255, 255, 0.85);
  --color-text-faded: rgba(255, 255, 255, 0.9);
  --color-text-bright: rgba(255, 255, 255, 0.95);
  --color-text-dull: color-mix(in srgb, var(--color-bg) 72%, transparent);
  --color-text-ghost: color-mix(in srgb, var(--color-bg) 60%, transparent);
  /* Input fields on dark surfaces */
  --color-input-bg: rgba(255, 255, 255, 0.08);
  --color-input-border: rgba(255, 255, 255, 0.25);
  --color-input-placeholder: rgba(255, 255, 255, 0.4);
  /* Accent glow for dialog shadows */
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 10%, transparent);
  --color-accent-shadow: color-mix(in srgb, var(--color-accent) 20%, transparent);
  --color-accent-glow: color-mix(in srgb, var(--color-accent) 15%, transparent);
  --color-accent-glow-strong: color-mix(in srgb, var(--color-accent) 50%, transparent);
  /* Modal backdrop */
  --color-backdrop: rgba(0, 0, 0, 0.7);
  --color-topbar-bg: rgba(10, 10, 20, 0.85);

  --font-heading: 'Sora', sans-serif;
  --font-drama: 'Lora', serif;
  --font-data: 'Fira Code', monospace;
  --font-body: 'Sora', sans-serif;

  /* Riftbound domain accents (advanced search domain filter pills; play pages) */
  --fury-color-primary: #dc2626;
  --calm-color-primary: #16a34a;
  --mind-color-primary: #2563eb;
  --body-color-primary: #ea580c;
  --chaos-color-primary: #9333ea;
  --order-color-primary: #eab308;
}

/* ── Light theme (SPA theme toggle sets data-theme; play pages stay dark) ── */
[data-theme="light"] {
  --color-primary: #F8F9FA;
  --color-bg: #18181B;
  --color-text: #18181B;
  --color-white: #ffffff;
  --color-surface: rgba(255, 255, 255, 0.85);
  --color-surface-hover: rgba(255, 255, 255, 0.95);
  --color-border: rgba(123, 97, 255, 0.25);
  --color-select-option-bg: #f0f0f5;
  /* Overlays become dark for light surfaces */
  --color-overlay-4: rgba(0, 0, 0, 0.04);
  --color-overlay-5: rgba(0, 0, 0, 0.05);
  --color-overlay-8: rgba(0, 0, 0, 0.06);
  --color-overlay-10: rgba(0, 0, 0, 0.08);
  --color-overlay-12: rgba(0, 0, 0, 0.10);
  --color-overlay-15: rgba(0, 0, 0, 0.12);
  --color-overlay-20: rgba(0, 0, 0, 0.15);
  --color-overlay-30: rgba(0, 0, 0, 0.22);
  --color-overlay-35: rgba(0, 0, 0, 0.26);
  --color-overlay-40: rgba(0, 0, 0, 0.30);
  --color-overlay-45: rgba(0, 0, 0, 0.34);
  --color-overlay-50: rgba(0, 0, 0, 0.38);
  --color-overlay-60: rgba(0, 0, 0, 0.46);
  --color-overlay-65: rgba(0, 0, 0, 0.50);
  --color-overlay-70: rgba(0, 0, 0, 0.54);
  --color-overlay-80: rgba(0, 0, 0, 0.62);
  /* Text emphasis for light surfaces */
  --color-text-dim: rgba(0, 0, 0, 0.55);
  --color-text-subtle: rgba(0, 0, 0, 0.65);
  --color-text-faded: rgba(0, 0, 0, 0.75);
  --color-text-bright: rgba(0, 0, 0, 0.87);
  --color-text-dull: color-mix(in srgb, var(--color-bg) 72%, transparent);
  --color-text-ghost: color-mix(in srgb, var(--color-bg) 60%, transparent);
  /* Input fields for light surfaces */
  --color-input-bg: rgba(0, 0, 0, 0.06);
  --color-input-border: rgba(0, 0, 0, 0.20);
  --color-input-placeholder: rgba(0, 0, 0, 0.35);
  /* Top bar background */
  --color-topbar-bg: rgba(248, 249, 250, 0.85);
}