/* ===================
   THEMES.CSS
   Colors and color classes
   =================== */


/* ===================
   COLOR VARIABLES
   Each functional color has base + light version
   =================== */

:root {
    /* Severity */
    --safe: #4CAF50;
    --safe-light: #E8F5E9;

    --caution: #FF9800;
    --caution-light: #FFF3E0;

    --danger: #F44336;
    --danger-light: #FFEBEE;

    /* Critical (stronger than danger, still same meaning family) */
    --critical: #B71C1C;
    --critical-light: #FFCDD2;

    /* Mood */
    --mania: #FF6384;
    --mania-light: #FCE4EC;
    --depression: #36A2EB;
    --depression-light: #E3F2FD;

    /* Categories */
    --alert: #FF9800;
    --alert-light: #FFF3E0;
    --user: #2196F3;
    --user-light: #E3F2FD;
    --research: #9C27B0;
    --research-light: #F3E5F5;
    --content: #009688;
    --content-light: #E0F2F1;
    --admin: #607D8B;
    --admin-light: #ECEFF1;
    --partner: #795548;
    --partner-light: #EFEBE9;
    --tool: #3F51B5;
    --tool-light: #E8EAF6;

    /* Conversation */
    --user-input: #4CAF50;
    --user-input-light: #E8F5E9;
    --ai-response: #FFC107;
    --ai-response-light: #FFFDE7;
    --prompt: #2196F3;
    --prompt-light: #E3F2FD;

    /* UI */
    --primary: #36A2EB;
    --primary-hover: #1D8FDB;
    --primary-active: #177CC2;
    --primary-light: #E3F2FD;

    --secondary: #607D8B;
    --secondary-light: #ECEFF1;

    --neutral: #9E9E9E;
    --neutral-light: #F5F5F5;

    --selected: #36A2EB;
    --selected-light: #E3F2FD;

    --current: #FFC107;
    --current-light: #FFFDE7;

    /* Focus ring */
    --focus: rgba(54, 162, 235, 0.35);

    /* Progress */
    --completed: #4CAF50;
    --completed-light: #E8F5E9;
    --upcoming: #9E9E9E;
    --upcoming-light: #F5F5F5;

    /* Decorative - ASK BEFORE USING */
    --fun1: #E91E63;
    --fun1-light: #FCE4EC;
    --fun2: #00BCD4;
    --fun2-light: #E0F7FA;
    --fun3: #CDDC39;
    --fun3-light: #F9FBE7;

    /* Page defaults */
    --bg-page: #FAF9F7;
    --bg-card: #FFFFFF;
    --border: #E0DFDD;
    --text: #2D2B29;
    --text-muted: #8A8885;
    --link: #36A2EB;
    --white: #FFFFFF;

    /* Font */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--toast-bg: var(--safe);
	--toast-text: #FFFFFF;
}


/* ===================
   THEME: WARM
   =================== */

[data-palette="warm"] {
    --bg-page: #FDF6E9;
    --bg-card: #FFFCF5;
    --border: #D4C4A8;
    --text: #4A3F2F;
    --text-muted: #8B7355;
    --link: #C67B3C;

    --primary: #C67B3C;
    --primary-hover: #B66F36;
    --primary-active: #9E5E2D;

    --focus: rgba(198, 123, 60, 0.35);
}


/* ===================
   THEME: COOL
   =================== */

[data-palette="cool"] {
    --bg-page: #E8EEF4;
    --bg-card: #F5F8FB;
    --border: #A8BDD0;
    --text: #1E3A5F;
    --text-muted: #5A7A9A;
    --link: #2563EB;

    --primary: #2563EB;
    --primary-hover: #1D4ED8;
    --primary-active: #1E40AF;

    --focus: rgba(37, 99, 235, 0.35);
}


/* ===================
   THEME: BOLD
   =================== */

[data-palette="bold"] {
    --bg-page: #1a1a2e;
    --bg-card: #252542;
    --border: #4a4a6a;
    --text: #ffffff;
    --text-muted: #a0a0c0;
    --link: #00d4ff;

    --primary: #00d4ff;
    --primary-hover: #00b8dd;
    --primary-active: #009ec0;

    --focus: rgba(0, 212, 255, 0.35);

    /* Brighter versions for dark background */
    --safe: #00ff88;
    --safe-light: #1a3d2a;

    --caution: #ffaa00;
    --caution-light: #3d3520;

    --danger: #ff4466;
    --danger-light: #3d1a22;

    /* Critical for dark background */
    --critical: #ff1f4a;
    --critical-light: #4a0f1c;
}


/* ===================
   FONT PALETTES
   =================== */

[data-font="default"] {
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

[data-font="serif"] {
    --font: Georgia, "Times New Roman", Times, serif;
}

[data-font="rounded"] {
    --font: "Nunito", "Varela Round", sans-serif;
}


/* ===================
   FUNCTIONAL COLOR CLASSES
   Sets the color variables, does NOT apply background or border
   Use with .background and/or .border-left to apply
   =================== */

/* Severity */
.safe { --color: var(--safe); --color-light: var(--safe-light); }
.caution { --color: var(--caution); --color-light: var(--caution-light); }
.danger { --color: var(--danger); --color-light: var(--danger-light); }
.critical { --color: var(--critical); --color-light: var(--critical-light); }

/* Mood */
.mania { --color: var(--mania); --color-light: var(--mania-light); }
.depression { --color: var(--depression); --color-light: var(--depression-light); }

/* Categories */
.alert { --color: var(--alert); --color-light: var(--alert-light); }
.user { --color: var(--user); --color-light: var(--user-light); }
.research { --color: var(--research); --color-light: var(--research-light); }
.content { --color: var(--content); --color-light: var(--content-light); }
.admin { --color: var(--admin); --color-light: var(--admin-light); }
.partner { --color: var(--partner); --color-light: var(--partner-light); }
.tool { --color: var(--tool); --color-light: var(--tool-light); }

/* Conversation */
.user-input { --color: var(--user-input); --color-light: var(--user-input-light); }
.ai-response { --color: var(--ai-response); --color-light: var(--ai-response-light); }
.prompt { --color: var(--prompt); --color-light: var(--prompt-light); }

/* UI */
.primary { --color: var(--primary); --color-light: var(--primary-light); }
.secondary { --color: var(--secondary); --color-light: var(--secondary-light); }
.neutral { --color: var(--neutral); --color-light: var(--neutral-light); }
.selected { --color: var(--selected); --color-light: var(--selected-light); }
.current { --color: var(--current); --color-light: var(--current-light); }

/* Progress */
.completed { --color: var(--completed); --color-light: var(--completed-light); }
.upcoming { --color: var(--upcoming); --color-light: var(--upcoming-light); }

/* Decorative - ASK BEFORE USING */
.fun1 { --color: var(--fun1); --color-light: var(--fun1-light); }
.fun2 { --color: var(--fun2); --color-light: var(--fun2-light); }
.fun3 { --color: var(--fun3); --color-light: var(--fun3-light); }


/* ===================
   APPLY COLOR: BACKGROUND
   Uses the light/faded version
   =================== */

.background {
    background: var(--color-light) !important;
}


/* ===================
   SOLID COLOR CLASSES
   For buttons that need solid background
   =================== */

.safe-solid { background: var(--safe); color: var(--white); }
.caution-solid { background: var(--caution); color: var(--white); }
.danger-solid { background: var(--danger); color: var(--white); }
.critical-solid { background: var(--critical); color: var(--white); }

.primary-solid { background: var(--primary); color: var(--white); }
.secondary-solid { background: var(--secondary); color: var(--white); }
.neutral-solid { background: var(--neutral); color: var(--white); }
.tool-solid { background: var(--tool); color: var(--white); }


/* ===================
   TEXT COLOR CLASSES
   =================== */

.text-safe { color: var(--safe); }
.text-caution { color: var(--caution); }
.text-danger { color: var(--danger); }
.text-critical { color: var(--critical); }

.text-mania { color: var(--mania); }
.text-depression { color: var(--depression); }
.text-primary { color: var(--primary); }
.text-muted { color: var(--text-muted); }


/* ===================
   BORDER CLASSES
   Add border using the color
   =================== */

.border {
    border: 1px solid var(--color, var(--border));
}

.border-top {
    border-top: 1px solid var(--color, var(--border));
}

.border-right {
    border-right: 4px solid var(--color, var(--border));
}

.border-bottom {
    border-bottom: 1px solid var(--color, var(--border));
}

.border-left {
    border-left: 4px solid var(--color, var(--border));
}