/* ============================================================
   GCFL Design System — 1. TOKENS
   CSS Custom Properties only. No layout, no components.
   Load order: FIRST (before style.css)
   ============================================================ */

:root {
  /* Dark theme tokens (default) */
  --ds-bg:             #07090e;
  --ds-surface:        #121621;
  --ds-surface-raised: #1a2035;
  --ds-border:         rgba(255, 255, 255, 0.08);
  --ds-text:           #f1f3f9;
  --ds-muted:          #9aa4b2;
  --ds-accent:         #8b5cf6;
  --ds-accent-hover:   #7c3aed;
  --ds-accent-glow:    rgba(139, 92, 246, 0.25);
  --ds-cyan:           #3fd0c9;
  --ds-danger:         #ff6b6b;
  --ds-success:        #34d399;
  --ds-r-sm:  6px;
  --ds-r-md:  10px;
  --ds-r-lg:  16px;
  --ds-r-xl:  20px;
  --ds-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.30);
  --ds-shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.45);
}

/* Light theme via OS preference */
@media (prefers-color-scheme: light) {
  :root {
    --ds-bg:             #f8fafc;
    --ds-surface:        #ffffff;
    --ds-surface-raised: #f1f5f9;
    --ds-border:         #e2e8f0;
    --ds-text:           #0f172a;
    --ds-muted:          #64748b;
    --ds-accent:         #7c3aed;
    --ds-accent-hover:   #5b21b6;
    --ds-accent-glow:    rgba(124, 58, 237, 0.10);
    --ds-cyan:           #0d9488;
    --ds-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
    --ds-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);
  }
}

/* Explicit override: data-theme="dark" */
[data-theme="dark"] {
  --ds-bg:             #07090e;
  --ds-surface:        #121621;
  --ds-surface-raised: #1a2035;
  --ds-border:         rgba(255, 255, 255, 0.08);
  --ds-text:           #f1f3f9;
  --ds-muted:          #9aa4b2;
  --ds-accent:         #8b5cf6;
  --ds-accent-hover:   #7c3aed;
  --ds-accent-glow:    rgba(139, 92, 246, 0.25);
  --ds-cyan:           #3fd0c9;
  --ds-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.30);
  --ds-shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.45);
}

/* Explicit override: data-theme="light" */
[data-theme="light"] {
  --ds-bg:             #f8fafc;
  --ds-surface:        #ffffff;
  --ds-surface-raised: #f1f5f9;
  --ds-border:         #e2e8f0;
  --ds-text:           #0f172a;
  --ds-muted:          #64748b;
  --ds-accent:         #7c3aed;
  --ds-accent-hover:   #5b21b6;
  --ds-accent-glow:    rgba(124, 58, 237, 0.10);
  --ds-cyan:           #0d9488;
  --ds-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
  --ds-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Bridge: style.css uses --bg, --card, --text, etc.
   These aliases connect old names to DS tokens. */
:root {
  --bg:          var(--ds-bg);
  --card:        var(--ds-surface);
  --card-border: var(--ds-border);
  --text:        var(--ds-text);
  --muted:       var(--ds-muted);
  --accent:      var(--ds-accent);
  --accent-glow: var(--ds-accent-glow);
  --accent-2:    var(--ds-cyan);
  --accent-2-glow: rgba(63, 208, 201, 0.12);
  --shadow:      var(--ds-shadow-sm);
}