/* GridKit Themes – M3 Color System */

/* === THEME: Indigo (Default) === */
[data-gk-theme="indigo"] {
    --gk-sidebar-bg: #eef2ff;
}

/* === THEME: Ocean (Blue-Teal) === */
[data-gk-theme="ocean"] {
    --gk-sidebar-bg: #f0f9ff;
    --gk-primary: #0ea5e9;
    --gk-on-primary: #fff;
    --gk-primary-container: #e0f2fe;
    --gk-on-primary-container: #0c4a6e;
    --gk-secondary: #64748b;
    --gk-tertiary: #14b8a6;
    --gk-error: #ef4444;
    --gk-warning: #f59e0b;
}

/* === THEME: Forest (Green) === */
[data-gk-theme="forest"] {
    --gk-sidebar-bg: #f0fdf4;
    --gk-primary: #059669;
    --gk-on-primary: #fff;
    --gk-primary-container: #d1fae5;
    --gk-on-primary-container: #064e3b;
    --gk-secondary: #6b7280;
    --gk-tertiary: #8b5cf6;
    --gk-error: #ef4444;
    --gk-warning: #f59e0b;
}

/* === THEME: Rose (Pink-Purple) === */
[data-gk-theme="rose"] {
    --gk-sidebar-bg: #fdf2f8;
    --gk-primary: #ec4899;
    --gk-on-primary: #fff;
    --gk-primary-container: #fce7f3;
    --gk-on-primary-container: #831843;
    --gk-secondary: #78716c;
    --gk-tertiary: #a855f7;
    --gk-error: #ef4444;
    --gk-warning: #f59e0b;
}

/* === THEME: Amber (Warm) === */
[data-gk-theme="amber"] {
    --gk-sidebar-bg: #fffbeb;
    --gk-primary: #d97706;
    --gk-on-primary: #fff;
    --gk-primary-container: #fef3c7;
    --gk-on-primary-container: #78350f;
    --gk-secondary: #78716c;
    --gk-tertiary: #0ea5e9;
    --gk-error: #ef4444;
    --gk-warning: #ea580c;
}

/* === THEME: Slate (Neutral/Minimal) === */
[data-gk-theme="slate"] {
    --gk-sidebar-bg: #f8fafc;
    --gk-primary: #475569;
    --gk-on-primary: #fff;
    --gk-primary-container: #e2e8f0;
    --gk-on-primary-container: #1e293b;
    --gk-secondary: #64748b;
    --gk-tertiary: #6366f1;
    --gk-error: #ef4444;
    --gk-warning: #f59e0b;
}

/* === Dark variants per theme === */
/* Sidebar: dunkler als Content (#1e293b) → niedrigere Elevation, M3-konform */
/* Accent: helle Version der Theme-Farbe die auf dunklem Hintergrund leuchtet  */

[data-gk-theme="indigo"][data-gk-mode="dark"] {
    --gk-sidebar-bg: #0d1225;
    --gk-sidebar-accent: #a5b4fc;
}
[data-gk-theme="ocean"][data-gk-mode="dark"] {
    --gk-primary: #38bdf8;
    --gk-on-primary: #0c4a6e;
    --gk-primary-container: #075985;
    --gk-on-primary-container: #e0f2fe;
    --gk-tertiary: #5eead4;
    --gk-sidebar-bg: #071a2d;
    --gk-sidebar-accent: #38bdf8;
}
[data-gk-theme="forest"][data-gk-mode="dark"] {
    --gk-primary: #34d399;
    --gk-on-primary: #064e3b;
    --gk-primary-container: #065f46;
    --gk-on-primary-container: #d1fae5;
    --gk-tertiary: #a78bfa;
    --gk-sidebar-bg: #071a12;
    --gk-sidebar-accent: #34d399;
}
[data-gk-theme="rose"][data-gk-mode="dark"] {
    --gk-primary: #f9a8d4;
    --gk-on-primary: #831843;
    --gk-primary-container: #9d174d;
    --gk-on-primary-container: #fce7f3;
    --gk-tertiary: #c084fc;
    --gk-sidebar-bg: #1a0818;
    --gk-sidebar-accent: #f9a8d4;
}
[data-gk-theme="amber"][data-gk-mode="dark"] {
    --gk-primary: #fbbf24;
    --gk-on-primary: #78350f;
    --gk-primary-container: #92400e;
    --gk-on-primary-container: #fef3c7;
    --gk-tertiary: #38bdf8;
    --gk-sidebar-bg: #1a0d06;
    --gk-sidebar-accent: #fbbf24;
}
[data-gk-theme="slate"][data-gk-mode="dark"] {
    --gk-primary: #94a3b8;
    --gk-on-primary: #1e293b;
    --gk-primary-container: #334155;
    --gk-on-primary-container: #e2e8f0;
    --gk-tertiary: #a5b4fc;
    --gk-sidebar-bg: #0d1424;
    --gk-sidebar-accent: #7dd3fc;
}

/* === Global Dark Mode — Surface & Text Colors === */
[data-gk-mode="dark"] {
    --gk-surface-dim:               #0f172a;
    --gk-surface:                   #1e293b;
    --gk-surface-bright:            #293548;
    --gk-surface-container-lowest:  #0a1120;
    --gk-surface-container-low:     #172033;
    --gk-surface-container:         #1e293b;
    --gk-surface-container-high:    #243044;
    --gk-surface-container-highest: #2d3a52;
    --gk-on-surface:                #e2e8f0;
    --gk-on-surface-variant:        #94a3b8;
    --gk-outline:                   #475569;
    --gk-outline-variant:           rgba(255,255,255,0.08);
}