/* ================================================
   Pollux — Design System
   Fonts: JetBrains Mono + Space Grotesk
   3 themes: dark (defaut), light, soft
   Couleurs accent: jaune moutarde, vert, rouge (minoritaires)
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ---- DARK (defaut) ---- */
[data-theme="dark"] {
    --bg:             #0a0a0a;
    --surface:        #111111;
    --elevated:       #1a1a1a;
    --input-bg:       #0d0d0d;
    --bg-hover:       #161616;
    --bg-active:      #1e1e1e;
    --bg-message-user:#0f0f0f;
    --bg-message-ai:  #111111;
    --bg-code:        #0d0d0d;
    --bg-card:        #111111;

    --border:         #1e1e1e;
    --border-hover:   #2a2a2a;
    --border-focus:   #333333;

    --text:           #e8e8e8;
    --text-dim-base:  #888888;
    --text-muted-base:#555555;
    --text-dim:       color-mix(in srgb, var(--text-dim-base) var(--muted-boost, 100%), var(--text));
    --text-muted:     color-mix(in srgb, var(--text-muted-base) var(--muted-boost, 100%), var(--text));
    --text-inverse:   #0a0a0a;

    --accent:         #c8a415;
    --accent-hover:   #d4b42e;
    --accent-glow:    rgba(200, 164, 21, 0.10);

    --green:          #22c55e;
    --red:            #ef4444;
    --yellow:         #f5c518;

    --scrollbar:      #222222;
    --scrollbar-hover:#333333;

    --shadow-sm:      none;
    --shadow-md:      0 4px 12px rgba(0,0,0,0.5);
    --shadow-lg:      0 8px 24px rgba(0,0,0,0.6);

    --mono:           'JetBrains Mono', monospace;
    --sans:           'Space Grotesk', -apple-system, sans-serif;
}

/* ---- LIGHT ---- */
[data-theme="light"] {
    --bg:             #fafafa;
    --surface:        #ffffff;
    --elevated:       #f5f5f5;
    --input-bg:       #ffffff;
    --bg-hover:       #f0f0f0;
    --bg-active:      #e8e8e8;
    --bg-message-user:#f7f7f7;
    --bg-message-ai:  #ffffff;
    --bg-code:        #f5f5f5;
    --bg-card:        #ffffff;

    --border:         #e5e5e5;
    --border-hover:   #d4d4d4;
    --border-focus:   #a3a3a3;

    --text:           #171717;
    --text-dim-base:  #737373;
    --text-muted-base:#a3a3a3;
    --text-dim:       color-mix(in srgb, var(--text-dim-base) var(--muted-boost, 100%), var(--text));
    --text-muted:     color-mix(in srgb, var(--text-muted-base) var(--muted-boost, 100%), var(--text));
    --text-inverse:   #fafafa;

    --accent:         #c8a415;
    --accent-hover:   #d4b42e;
    --accent-glow:    rgba(200, 164, 21, 0.10);

    --green:          #16a34a;
    --red:            #dc2626;
    --yellow:         #0461ca;

    --scrollbar:      #d4d4d4;
    --scrollbar-hover:#a3a3a3;

    --shadow-sm:      0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:      0 4px 12px rgba(0,0,0,0.06);
    --shadow-lg:      0 8px 24px rgba(0,0,0,0.08);

    --mono:           'JetBrains Mono', monospace;
    --sans:           'Space Grotesk', -apple-system, sans-serif;
}

/* ---- SOFT (sombre bleuté) ---- */
[data-theme="soft"] {
    --bg:             #0c1017;
    --surface:        #111822;
    --elevated:       #162030;
    --input-bg:       #0e1319;
    --bg-hover:       #152030;
    --bg-active:      #1a2840;
    --bg-message-user:#0d1218;
    --bg-message-ai:  #111822;
    --bg-code:        #0e1319;
    --bg-card:        #111822;

    --border:         #1c2a3e;
    --border-hover:   #263a52;
    --border-focus:   #3a5470;

    --text:           #d8dfe8;
    --text-dim-base:  #7a8ea6;
    --text-muted-base:#4a5e76;
    --text-dim:       color-mix(in srgb, var(--text-dim-base) var(--muted-boost, 100%), var(--text));
    --text-muted:     color-mix(in srgb, var(--text-muted-base) var(--muted-boost, 100%), var(--text));
    --text-inverse:   #0c1017;

    --accent:         #c8a415;
    --accent-hover:   #d4b42e;
    --accent-glow:    rgba(200, 164, 21, 0.10);

    --green:          #34d472;
    --red:            #f06060;
    --yellow:         #e0b414;

    --scrollbar:      #1c2a3e;
    --scrollbar-hover:#2a3e56;

    --shadow-sm:      none;
    --shadow-md:      0 4px 12px rgba(0,0,0,0.5);
    --shadow-lg:      0 8px 24px rgba(0,0,0,0.6);

    --mono:           'JetBrains Mono', monospace;
    --sans:           'Space Grotesk', -apple-system, sans-serif;
}

/* ================================================
   Accent Color Overrides
   Appliquees via data-accent sur <html>
   gold = defaut (pas d'override necessaire)
   Specificite augmentee avec html[] pour garantir
   la priorite sur les regles [data-theme]
   ================================================ */

html[data-accent="blue"],
html[data-accent="blue"][data-theme="dark"],
html[data-accent="blue"][data-theme="light"],
html[data-accent="blue"][data-theme="soft"] {
    --accent:         #3b82f6;
    --accent-hover:   #60a5fa;
    --accent-glow:    rgba(59, 130, 246, 0.10);
}

html[data-accent="violet"],
html[data-accent="violet"][data-theme="dark"],
html[data-accent="violet"][data-theme="light"],
html[data-accent="violet"][data-theme="soft"] {
    --accent:         #8b5cf6;
    --accent-hover:   #a78bfa;
    --accent-glow:    rgba(139, 92, 246, 0.10);
}

html[data-accent="emerald"],
html[data-accent="emerald"][data-theme="dark"],
html[data-accent="emerald"][data-theme="light"],
html[data-accent="emerald"][data-theme="soft"] {
    --accent:         #10b981;
    --accent-hover:   #34d399;
    --accent-glow:    rgba(16, 185, 129, 0.10);
}

html[data-accent="rose"],
html[data-accent="rose"][data-theme="dark"],
html[data-accent="rose"][data-theme="light"],
html[data-accent="rose"][data-theme="soft"] {
    --accent:         #f43f5e;
    --accent-hover:   #fb7185;
    --accent-glow:    rgba(244, 63, 94, 0.10);
}

html[data-accent="orange"],
html[data-accent="orange"][data-theme="dark"],
html[data-accent="orange"][data-theme="light"],
html[data-accent="orange"][data-theme="soft"] {
    --accent:         #f97316;
    --accent-hover:   #fb923c;
    --accent-glow:    rgba(249, 115, 22, 0.10);
}

html[data-accent="cyan"],
html[data-accent="cyan"][data-theme="dark"],
html[data-accent="cyan"][data-theme="light"],
html[data-accent="cyan"][data-theme="soft"] {
    --accent:         #06b6d4;
    --accent-hover:   #22d3ee;
    --accent-glow:    rgba(6, 182, 212, 0.10);
}

html[data-accent="indigo"],
html[data-accent="indigo"][data-theme="dark"],
html[data-accent="indigo"][data-theme="light"],
html[data-accent="indigo"][data-theme="soft"] {
    --accent:         #6366f1;
    --accent-hover:   #818cf8;
    --accent-glow:    rgba(99, 102, 241, 0.10);
}

html[data-accent="crimson"],
html[data-accent="crimson"][data-theme="dark"],
html[data-accent="crimson"][data-theme="light"],
html[data-accent="crimson"][data-theme="soft"] {
    --accent:         #dc2626;
    --accent-hover:   #ef4444;
    --accent-glow:    rgba(220, 38, 38, 0.10);
}

html[data-accent="amber"],
html[data-accent="amber"][data-theme="dark"],
html[data-accent="amber"][data-theme="light"],
html[data-accent="amber"][data-theme="soft"] {
    --accent:         #d97706;
    --accent-hover:   #f59e0b;
    --accent-glow:    rgba(217, 119, 6, 0.10);
}

html[data-accent="teal"],
html[data-accent="teal"][data-theme="dark"],
html[data-accent="teal"][data-theme="light"],
html[data-accent="teal"][data-theme="soft"] {
    --accent:         #0d9488;
    --accent-hover:   #14b8a6;
    --accent-glow:    rgba(13, 148, 136, 0.10);
}

html[data-accent="fuchsia"],
html[data-accent="fuchsia"][data-theme="dark"],
html[data-accent="fuchsia"][data-theme="light"],
html[data-accent="fuchsia"][data-theme="soft"] {
    --accent:         #c026d3;
    --accent-hover:   #d946ef;
    --accent-glow:    rgba(192, 38, 211, 0.10);
}

html[data-accent="terracotta"],
html[data-accent="terracotta"][data-theme="dark"],
html[data-accent="terracotta"][data-theme="light"],
html[data-accent="terracotta"][data-theme="soft"] {
    --accent:         #c2571a;
    --accent-hover:   #d4691f;
    --accent-glow:    rgba(194, 87, 26, 0.10);
}