﻿/* theme-variables.css */

/* --- Global Variables --- */
:root {
    --transition: 0.22s cubic-bezier(0.4,0,0.2,1);
    --border-radius: 12px;
    --code-bg: #262629;
    --code-text: #eee;
    /* Global accent and focus colors */
    --accent: #14b8a6; /* Teal accent */
    --accent-hover: #0d9488;
    --accent-light: #99f6e4;
    --focus-outline: 2px solid var(--accent);
}

/* --- LIGHT THEME (Default) --- */
html.theme-light {
    --background: #f5f7fa;
    --text: #1f2933;
    --link: #2563eb;
    --link-hover: #1d4ed8;
    --card-bg: #ffffff;
    --card-text: #111827;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    --input-bg: #ffffff;
    --card-bg-light: #eef2f6;
    --link-hover-subtle: #dbeafe;
    --category-box-bg: #f3f4f6;
    --category-box-border: #d1d5db;
    --category-box-text: #374151;
    --button-bg: var(--accent);
    --button-text: #ffffff;
    --button-hover-bg: var(--accent-hover);
}

/* --- DARK THEME --- */
html.theme-dark {
    --background: #0e1117;
    --text: #e5e7eb;
    --link: #60a5fa;
    --link-hover: #93c5fd;
    --card-bg: #1c1f26;
    --card-text: #f3f4f6;
    --card-shadow: 0 6px 20px rgba(0,0,0,0.5);
    --input-bg: #16191f;
    --card-bg-light: #242832;
    --link-hover-subtle: #2d3748;
    --category-box-bg: #2a2f3a;
    --category-box-border: #3f4552;
    --category-box-text: #e5e7eb;
    --button-bg: var(--accent);
    --button-text: #e0f2f1;
    --button-hover-bg: var(--accent-hover);
}

/* --- SOLARIZED THEME --- */
html.theme-solarized {
    --background: #fdf6e3;
    --text: #586e75;
    --link: #268bd2;
    --link-hover: #2aa198;
    --card-bg: #faf3e0;
    --card-text: #455a64;
    --card-shadow: 0 2px 12px rgba(38,139,210,0.1);
    --input-bg: #fdf6e3;
    --card-bg-light: #f0e9d2;
    --link-hover-subtle: #e8e1c4;
    --category-box-bg: #f5edd5;
    --category-box-border: #ded6b9;
    --category-box-text: #56666a;
    --button-bg: var(--accent);
    --button-text: #ffffff;
    --button-hover-bg: var(--accent-hover);
}
