/**
 * GigPal – Semantische Design Tokens
 * Phase 1: Token-Definitionen für alle Theme-Kombinationen.
 * Werte exakt aus index.html Overrides übernommen.
 * Overrides bleiben vorerst aktiv – keine visuelle Änderung.
 *
 * @see docs/THEME-SEMANTIC-TOKENS-REFACTORING.md
 */

/* ==========================================================================
   SLATE LIGHT (Default)
   ========================================================================== */
:root,
html:not([data-high-contrast="true"])[data-bg-scheme="slate"]:not(.dark) {
  --color-bg-page: #f8fafc;
  --color-bg-surface: #ffffff;
  --color-bg-elevated: #f1f5f9;
  --color-bg-muted: #e2e8f0;
  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-text-subtle: #64748b;
  --color-border: #e2e8f0;
  --color-border-muted: #cbd5e1;
  --color-nav-bg: transparent;
  --color-nav-hover: #f1f5f9;
  --color-nav-text: #64748b;
  --color-scrollbar-track: transparent;
  --color-scrollbar-thumb: #cbd5e1;
  --color-scrollbar-thumb-hover: #94a3b8;
  --color-card-bg: #ffffff;
  --color-card-border: #e2e8f0;
  --color-public-card-bg: #ffffff;
  --color-public-card-border: #e2e8f0;
  --color-kbd-bg: #e2e8f0;
  --color-kbd-text: #334155;
  --color-kbd-border: #cbd5e1;
  --color-kbd-shadow: #94a3b8;
}

/* Fallback: Dark ohne Scheme (z. B. vor React-Hydration) = Slate Dark */
html:not([data-high-contrast="true"]).dark:not([data-bg-scheme]) {
  --color-bg-page: #0f172a;
  --color-bg-surface: #0a0f1a;
  --color-bg-elevated: #1e293b;
  --color-bg-muted: #334155;
  --color-text: #f8fafc;
  --color-text-muted: #94a3b8;
  --color-text-subtle: #64748b;
  --color-border: #1e293b;
  --color-border-muted: #334155;
  --color-nav-bg: transparent;
  --color-nav-hover: #1e293b;
  --color-nav-text: #94a3b8;
  --color-scrollbar-track: #1e293b;
  --color-scrollbar-thumb: #475569;
  --color-scrollbar-thumb-hover: #64748b;
  --color-card-bg: #0a0f1a;
  --color-card-border: #1e293b;
  --color-public-card-bg: #1e293b;
  --color-public-card-border: #334155;
  --color-kbd-bg: #334155;
  --color-kbd-text: #e2e8f0;
  --color-kbd-border: #475569;
  --color-kbd-shadow: #1e293b;
}

/* ==========================================================================
   SLATE DARK
   ========================================================================== */
html:not([data-high-contrast="true"])[data-bg-scheme="slate"].dark {
  --color-bg-page: #0f172a;
  --color-bg-surface: #0a0f1a;
  --color-bg-elevated: #1e293b;
  --color-bg-muted: #334155;
  --color-text: #f8fafc;
  --color-text-muted: #94a3b8;
  --color-text-subtle: #64748b;
  --color-border: #1e293b;
  --color-border-muted: #334155;
  --color-nav-bg: transparent;
  --color-nav-hover: #1e293b;
  --color-nav-text: #94a3b8;
  --color-scrollbar-track: #1e293b;
  --color-scrollbar-thumb: #475569;
  --color-scrollbar-thumb-hover: #64748b;
  --color-card-bg: #0a0f1a;
  --color-card-border: #1e293b;
  --color-public-card-bg: #1e293b;
  --color-public-card-border: #334155;
  --color-kbd-bg: #334155;
  --color-kbd-text: #e2e8f0;
  --color-kbd-border: #475569;
  --color-kbd-shadow: #1e293b;
}

/* ==========================================================================
   NEUTRAL LIGHT
   ========================================================================== */
html:not([data-high-contrast="true"])[data-bg-scheme="neutral"]:not(.dark) {
  --color-bg-page: #fafafa;
  --color-bg-surface: #ffffff;
  --color-bg-elevated: #fafafa;
  --color-bg-muted: #e5e5e5;
  --color-text: #0f172a;
  --color-text-muted: #525252;
  --color-text-subtle: #737373;
  --color-border: #e5e5e5;
  --color-border-muted: #d4d4d4;
  --color-nav-bg: transparent;
  --color-nav-hover: #fafafa;
  --color-nav-text: #737373;
  --color-scrollbar-track: transparent;
  --color-scrollbar-thumb: #d4d4d4;
  --color-scrollbar-thumb-hover: #a3a3a3;
  --color-card-bg: #ffffff;
  --color-card-border: #e2e8f0;
  --color-public-card-bg: #ffffff;
  --color-public-card-border: #e5e5e5;
  --color-kbd-bg: #e2e8f0;
  --color-kbd-text: #334155;
  --color-kbd-border: #cbd5e1;
  --color-kbd-shadow: #94a3b8;
}

/* ==========================================================================
   NEUTRAL DARK
   ========================================================================== */
html:not([data-high-contrast="true"])[data-bg-scheme="neutral"].dark {
  --color-bg-page: #171717;
  --color-bg-surface: #0a0a0a;
  --color-bg-elevated: #404040;
  --color-bg-muted: #525252;
  --color-text: #fafafa;
  --color-text-muted: #a3a3a3;
  --color-text-subtle: #737373;
  --color-border: #404040;
  --color-border-muted: #525252;
  --color-nav-bg: transparent;
  --color-nav-hover: #262626;
  --color-nav-text: #a3a3a3;
  --color-scrollbar-track: #262626;
  --color-scrollbar-thumb: #525252;
  --color-scrollbar-thumb-hover: #737373;
  --color-card-bg: #0a0a0a;
  --color-card-border: #262626;
  --color-public-card-bg: #262626;
  --color-public-card-border: #404040;
  --color-kbd-bg: #404040;
  --color-kbd-text: #e5e5e5;
  --color-kbd-border: #525252;
  --color-kbd-shadow: #262626;
}

/* ==========================================================================
   WARM LIGHT
   ========================================================================== */
html:not([data-high-contrast="true"])[data-bg-scheme="warm"]:not(.dark) {
  --color-bg-page: #fafaf9;
  --color-bg-surface: #fefdfb;
  --color-bg-elevated: #f5f5f4;
  --color-bg-muted: #e7e5e4;
  --color-text: #0f172a;
  --color-text-muted: #57534e;
  --color-text-subtle: #78716c;
  --color-border: #e7e5e4;
  --color-border-muted: #d6d3d1;
  --color-nav-bg: transparent;
  --color-nav-hover: #f5f5f4;
  --color-nav-text: #78716c;
  --color-scrollbar-track: transparent;
  --color-scrollbar-thumb: #d6d3d1;
  --color-scrollbar-thumb-hover: #a8a29e;
  --color-card-bg: #ffffff;
  --color-card-border: #e2e8f0;
  --color-public-card-bg: #fefdfb;
  --color-public-card-border: #e7e5e4;
  --color-kbd-bg: #e7e5e4;
  --color-kbd-text: #57534e;
  --color-kbd-border: #d6d3d1;
  --color-kbd-shadow: #a8a29e;
}

/* ==========================================================================
   WARM DARK – warme Brauntöne (Stone), nicht fast-schwarz
   ========================================================================== */
html:not([data-high-contrast="true"])[data-bg-scheme="warm"].dark {
  --color-bg-page: #1c1917;
  --color-bg-surface: #292524;
  --color-bg-elevated: #422f28;
  --color-bg-muted: #54422e;
  --color-text: #fafaf9;
  --color-text-muted: #a8a29e;
  --color-text-subtle: #78716c;
  --color-border: #44403c;
  --color-border-muted: #57534e;
  --color-nav-bg: transparent;
  --color-nav-hover: #292524;
  --color-nav-text: #a8a29e;
  --color-scrollbar-track: #1c1917;
  --color-scrollbar-thumb: #57534e;
  --color-scrollbar-thumb-hover: #78716c;
  --color-card-bg: #292524;
  --color-card-border: #44403c;
  --color-public-card-bg: #292524;
  --color-public-card-border: #44403c;
  --color-kbd-bg: #422f28;
  --color-kbd-text: #fafaf9;
  --color-kbd-border: #57534e;
  --color-kbd-shadow: #292524;
}

/* ==========================================================================
   COOL LIGHT
   ========================================================================== */
html:not([data-high-contrast="true"])[data-bg-scheme="cool"]:not(.dark) {
  --color-bg-page: #f0f9ff;
  --color-bg-surface: #f0f9ff;
  --color-bg-elevated: #e0f2fe;
  --color-bg-muted: #bae6fd;
  --color-text: #0f172a;
  --color-text-muted: #0369a1;
  --color-text-subtle: #0284c7;
  --color-border: #e0f2fe;
  --color-border-muted: #7dd3fc;
  --color-nav-bg: transparent;
  --color-nav-hover: #e0f2fe;
  --color-nav-text: #0284c7;
  --color-scrollbar-track: transparent;
  --color-scrollbar-thumb: #7dd3fc;
  --color-scrollbar-thumb-hover: #38bdf8;
  --color-card-bg: #ffffff;
  --color-card-border: #e2e8f0;
  --color-public-card-bg: #f0f9ff;
  --color-public-card-border: #e0f2fe;
  --color-kbd-bg: #e0f2fe;
  --color-kbd-text: #0369a1;
  --color-kbd-border: #7dd3fc;
  --color-kbd-shadow: #0284c7;
}

/* ==========================================================================
   COOL DARK
   ========================================================================== */
html:not([data-high-contrast="true"])[data-bg-scheme="cool"].dark {
  --color-bg-page: #0c4a6e;
  --color-bg-surface: #021829;
  --color-bg-elevated: #0e7490;
  --color-bg-muted: #0891b2;
  --color-text: #f0fdfa;
  --color-text-muted: #67e8f9;
  --color-text-subtle: #22d3ee;
  --color-border: #0e7490;
  --color-border-muted: #0891b2;
  --color-nav-bg: transparent;
  --color-nav-hover: #075985;
  --color-nav-text: #67e8f9;
  --color-scrollbar-track: #0c4a6e;
  --color-scrollbar-thumb: #0891b2;
  --color-scrollbar-thumb-hover: #22d3ee;
  --color-card-bg: #021829;
  --color-card-border: #075985;
  --color-public-card-bg: #075985;
  --color-public-card-border: #0e7490;
  --color-kbd-bg: #0e7490;
  --color-kbd-text: #cffafe;
  --color-kbd-border: #0891b2;
  --color-kbd-shadow: #075985;
}

/* ==========================================================================
   PURPLE LIGHT
   ========================================================================== */
html:not([data-high-contrast="true"])[data-bg-scheme="purple"]:not(.dark) {
  --color-bg-page: #faf5ff;
  --color-bg-surface: #faf5ff;
  --color-bg-elevated: #ede9fe;
  --color-bg-muted: #ddd6fe;
  --color-text: #0f172a;
  --color-text-muted: #6d28d9;
  --color-text-subtle: #7c3aed;
  --color-border: #ede9fe;
  --color-border-muted: #c4b5fd;
  --color-nav-bg: transparent;
  --color-nav-hover: #ede9fe;
  --color-nav-text: #7c3aed;
  --color-scrollbar-track: transparent;
  --color-scrollbar-thumb: #c4b5fd;
  --color-scrollbar-thumb-hover: #a78bfa;
  --color-card-bg: #ffffff;
  --color-card-border: #e2e8f0;
  --color-public-card-bg: #faf5ff;
  --color-public-card-border: #ede9fe;
  --color-kbd-bg: #ede9fe;
  --color-kbd-text: #6d28d9;
  --color-kbd-border: #c4b5fd;
  --color-kbd-shadow: #7c3aed;
}

/* ==========================================================================
   PURPLE DARK
   ========================================================================== */
html:not([data-high-contrast="true"])[data-bg-scheme="purple"].dark {
  --color-bg-page: #1e1b4b;
  --color-bg-surface: #0f0e1a;
  --color-bg-elevated: #4f46e5;
  --color-bg-muted: #6366f1;
  --color-text: #faf5ff;
  --color-text-muted: #c4b5fd;
  --color-text-subtle: #a78bfa;
  --color-border: #4f46e5;
  --color-border-muted: #6366f1;
  --color-nav-bg: transparent;
  --color-nav-hover: #312e81;
  --color-nav-text: #c4b5fd;
  --color-scrollbar-track: #1e1b4b;
  --color-scrollbar-thumb: #6366f1;
  --color-scrollbar-thumb-hover: #818cf8;
  --color-card-bg: #0f0e1a;
  --color-card-border: #312e81;
  --color-public-card-bg: #312e81;
  --color-public-card-border: #4f46e5;
  --color-kbd-bg: #4f46e5;
  --color-kbd-text: #ede9fe;
  --color-kbd-border: #6366f1;
  --color-kbd-shadow: #312e81;
}

/* ==========================================================================
   GLASSMORPHISM (optionale Design-Variante)
   @see docs/PLAN_GLASSMORPHISM.md
   Aktivierung: html[data-glass="true"] oder Nutzung der Klassen .glass / .glass-card
   ========================================================================== */

/* Blur-Stärken (theme-unabhängig) */
:root {
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 24px;
}

/* Slate Light: Glas-Oberflächen */
:root,
html:not([data-high-contrast="true"])[data-bg-scheme="slate"]:not(.dark) {
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-bg-strong: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
}

/* Slate Dark: Glas-Oberflächen – deutlich transparenter, damit Hintergrund durchscheint */
html:not([data-high-contrast="true"]).dark:not([data-bg-scheme]),
html:not([data-high-contrast="true"])[data-bg-scheme="slate"].dark {
  --glass-bg: rgba(15, 23, 42, 0.45);
  --glass-bg-strong: rgba(30, 41, 59, 0.7);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}