/* frontend/styles/themes.css */

/* --- 1. DEKLARACJA KOLORÓW WIODĄCYCH Z BAZY (theme_color_enum) --- */
:root[data-color="purple"]     { --theme-h: 275; --theme-s: 68%; --theme-l: 45%; }
:root[data-color="pink"]       { --theme-h: 330; --theme-s: 85%; --theme-l: 55%; }
:root[data-color="red"]        { --theme-h: 349; --theme-s: 89%; --theme-l: 42%; }
:root[data-color="orange"]     { --theme-h: 28;  --theme-s: 90%; --theme-l: 45%; }
:root[data-color="yellow"]     { --theme-h: 45;  --theme-s: 93%; --theme-l: 47%; }
:root[data-color="lightgreen"] { --theme-h: 145; --theme-s: 63%; --theme-l: 42%; }
:root[data-color="darkgreen"]  { --theme-h: 152; --theme-s: 80%; --theme-l: 25%; }
:root[data-color="lightblue"]  { --theme-h: 195; --theme-s: 85%; --theme-l: 45%; }
:root[data-color="darkblue"]   { --theme-h: 220; --theme-s: 65%; --theme-l: 30%; }

/* --- 2. DEKLARACJA TRYBU (theme_mode_enum) --- */
:root[data-theme="dark"] {
    --bg-main: #0a0312;
    --bg-panel: rgba(30, 15, 50, 0.6);
    --bg-surface: rgba(36, 11, 54, 0.4);
    --bg-surface-light: rgba(56, 21, 84, 0.6);
    --bg-input: rgba(0, 0, 0, 0.3);
    --bg-row: rgba(26, 11, 46, 0.8);
    --bg-card: rgba(20, 10, 35, 0.95);

    --text-main: #ffffff;
    --text-muted: #aaaaaa;
    --text-light: #c0c0c0;

    --text-accent: color-mix(in srgb, var(--highlight), white 40%);
    --icon-accent: color-mix(in srgb, var(--highlight), white 50%);

    --border-light: rgba(255, 255, 255, 0.1);
    --border-color: rgba(255, 255, 255, 0.15);
}

/* Delikatnie Ciemny (Grafitowy) */
:root[data-theme="soft-dark"] {
    --bg-main: #16161a;
    --bg-panel: rgba(35, 35, 45, 0.6);
    --bg-surface: rgba(45, 45, 55, 0.4);
    --bg-surface-light: rgba(65, 65, 75, 0.6);
    --bg-input: rgba(0, 0, 0, 0.2);
    --bg-row: rgba(40, 40, 50, 0.8);
    --bg-card: rgba(30, 30, 40, 0.95);
    --text-main: #e2e2e2;
    --text-muted: #a0a0a5;
    --text-light: #c0c0c5;
    --text-accent: color-mix(in srgb, var(--highlight), white 30%);
    --icon-accent: color-mix(in srgb, var(--highlight), white 40%);
    --border-light: rgba(255, 255, 255, 0.08);
    --border-color: rgba(255, 255, 255, 0.12);
}

/* Jasny: Pudrowy Róż */
:root[data-theme="light-rose"] {
    --bg-main: #f5e6ea;
    --bg-panel: #fcf4f6;
    --bg-surface: #fcf4f6;
    --bg-surface-light: #ebd6dd;
    --bg-input: #ffffff;
    --bg-row: #fcf4f6;
    --bg-card: #fcf4f6;
    --text-main: #3b282e;
    --text-muted: #856a73;
    --text-light: #b59ea6;
    --border-light: rgba(59, 40, 46, 0.08);
    --border-color: rgba(59, 40, 46, 0.15);
}

/* Jasny: Ciepły Beż (Latte) */
:root[data-theme="light-latte"] {
    --bg-main: #ece5dc;
    --bg-panel: #f7f3ee;
    --bg-surface: #f7f3ee;
    --bg-surface-light: #dfd5c8;
    --bg-input: #ffffff;
    --bg-row: #f7f3ee;
    --bg-card: #f7f3ee;
    --text-main: #3d332a;
    --text-muted: #8a7c70;
    --text-light: #b8ac9e;
    --border-light: rgba(61, 51, 42, 0.08);
    --border-color: rgba(61, 51, 42, 0.15);
}

/* Jasny: Słodka Brzoskwinia */
:root[data-theme="light-peach"] {
    --bg-main: #ffe8dd;
    --bg-panel: #fff5f0;
    --bg-surface: #fff5f0;
    --bg-surface-light: #ffd6c4;
    --bg-input: #ffffff;
    --bg-row: #fff5f0;
    --bg-card: #fff5f0;
    --text-main: #42281d;
    --text-muted: #8f6758;
    --text-light: #c29c8e;
    --border-light: rgba(66, 40, 29, 0.08);
    --border-color: rgba(66, 40, 29, 0.15);
}

/* Jasny: Mrożona Mięta (Szałwia) */
:root[data-theme="light-sage"] {
    --bg-main: #e3ede7;
    --bg-panel: #f0f7f3;
    --bg-surface: #f0f7f3;
    --bg-surface-light: #d0ded6;
    --bg-input: #ffffff;
    --bg-row: #f0f7f3;
    --bg-card: #f0f7f3;
    --text-main: #213328;
    --text-muted: #627a6c;
    --text-light: #94ad9f;
    --border-light: rgba(33, 51, 40, 0.08);
    --border-color: rgba(33, 51, 40, 0.15);
}

/* --- 3. GLOBALNE TOKENY DESIGNU (DESIGN TOKENS) --- */
:root {
    /* Kolory dynamiczne */
    --color-primary: hsl(var(--theme-h), var(--theme-s), var(--theme-l));
    --color-primary-dark: hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) - 15%));
    
    --highlight: var(--color-primary);
    --accent-color: var(--color-primary-dark);
    --text-accent: var(--highlight);
    --icon-accent: var(--highlight);
    --shadow-primary: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.4);
    --bg-primary-alpha: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.15);

    /* Kolory statusów */
    --color-success: #2ecc71;
    --color-danger: #ff4d4d;
    --color-warning: #f1c40f;

    /* Inteligentne tokeny kontrastu (Domyślnie pod ciemny tryb) */
    --timer-color-safe: #f1c40f;
    --calendar-day-bg: rgba(255, 255, 255, 0.03);
    --calendar-day-border: transparent;
    --text-on-theme: #ffffff;
    --progress-bg-safe: rgba(255, 255, 255, 0.05);
    --result-bg-mix: 0.05;
    --result-border-mix: 0.1;

    /* Typografia */
    --font-main: 'Montserrat', sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.85rem;
    --text-base: 1rem;
    --text-lg: 1.2rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Odstępy (Spacing) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Zaokrąglenia (Border Radius) */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 50px;
    --radius-circle: 50%;
    --radius-circle2: 100%;

    /* Cienie (Shadows) */
    --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.2);
    --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.4);

    /* Kolory Grup (Tęcza) */
    --group-red:    #c31432; 
    --group-orange: #e67e22; 
    --group-yellow: #f1c40f; 
    --group-green:  #2ecc71; 
    --group-blue:   #0abde3;
}

/* --- 4. NADPISANIA DLA WSZYSTKICH TRYBÓW JASNYCH (WYGODA I CZYTELNOŚĆ) --- */
:root[data-theme^="light-"] {
    --timer-color-safe: #d35400; /* Ciemniejszy pomarańcz */
    --calendar-day-bg: color-mix(in srgb, var(--bg-main), black 3%);
    --calendar-day-border: var(--border-light);
    --text-on-theme: #ffffff;
    --progress-bg-safe: color-mix(in srgb, var(--bg-main), black 8%);
    --result-bg-mix: 0.15;
    --result-border-mix: 0.3;

    /* Wyraźniejszy tekst akcentu dla jasnych motywów */
    --text-accent: color-mix(in srgb, var(--highlight), black 30%);
}