/* ======================================================
   THEME PRESETS & DESIGN SYSTEM
   ====================================================== */

/* ========== BASE FALLBACK VARIABLES ========== */
:root {
    /* Neutral Colors */
    --color-bg: #18181b;
    --color-surface: #27272a;
    --color-text: #fafafa;
    --color-text-muted: #a1a1aa;
    --color-border: #3f3f46;
    --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

    /* Brand Colors */
    --color-main: #6366f1;
    --color-main-hover: #4f46e5;
    --color-link: #8b5cf6;

    /* Gradients */
    --gradient-main: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --gradient-main-hover: linear-gradient(315deg, #6366f1 0%, #8b5cf6 100%);
}

/* ========== THEME MODES ========== */
:root[data-theme="dark"] {
    --color-bg: #18181b;
    --color-surface: #27272a;
    --color-text: #fafafa;
    --color-text-muted: #a1a1aa;
    --color-border: #3f3f46;
    --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

:root[data-theme="light"] {
    --color-bg: #fafafa;
    --color-surface: #ffffff;
    --color-text: #18181b;
    --color-text-muted: #52525b;
    --color-border: #e4e4e7;
    --card-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

/* ========== COLOR PRESETS ========== */
:root[data-preset="indigo-purple"] {
    --color-main: #6366f1;
    --color-main-hover: #4f46e5;
    --color-link: #8b5cf6;
    --gradient-main: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --gradient-main-hover: linear-gradient(315deg, #6366f1 0%, #8b5cf6 100%);
}

:root[data-preset="pink-orange"] {
    --color-main: #ec4899;
    --color-main-hover: #db2777;
    --color-link: #f97316;
    --gradient-main: linear-gradient(135deg, #ec4899 0%, #f97316 100%);
    --gradient-main-hover: linear-gradient(315deg, #ec4899 0%, #f97316 100%);
}

:root[data-preset="cyan-emerald"] {
    --color-main: #06b6d4;
    --color-main-hover: #0891b2;
    --color-link: #10b981;
    --gradient-main: linear-gradient(135deg, #06b6d6 0%, #10b981 100%);
    --gradient-main-hover: linear-gradient(315deg, #06b6d4 0%, #10b981 100%);
}

:root[data-preset="amber-red"] {
    --color-main: #f59e0b;
    --color-main-hover: #d97706;
    --color-link: #ef4444;
    --gradient-main: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    --gradient-main-hover: linear-gradient(315deg, #f59e0b 0%, #ef4444 100%);
}

:root[data-preset="emerald-cyan"] {
    --color-main: #10b981;
    --color-main-hover: #059669;
    --color-link: #06b6d4;
    --gradient-main: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
    --gradient-main-hover: linear-gradient(315deg, #10b981 0%, #06b6d4 100%);
}

/* ========== VARIABLE MAPPING FOR COMPATIBILITY ========== */
:root,
:root[data-theme],
:root[data-preset] {
    /* Map theme variables to design system */
    --color-primary: var(--color-main, #6366f1);
    --color-primary-dark: var(--color-main-hover, #4f46e5);
    --color-secondary: var(--color-link, #8b5cf6);
    --color-secondary-light: color-mix(in srgb, var(--color-link, #8b5cf6) 70%, white);

    /* Hero section compatibility */
    --hero-primary: var(--color-main, #6366f1);
    --hero-primary-light: var(--color-link, #8b5cf6);
    --hero-secondary: color-mix(in srgb, var(--color-link, #8b5cf6) 80%, white);
    --hero-shadow-primary: 0 0 24px color-mix(in srgb, var(--color-main, #6366f1) 45%, transparent);
    --hero-shadow-secondary: 0 0 24px color-mix(in srgb, var(--color-link, #8b5cf6) 35%, transparent);

    /* Effects compatibility */
    --shadow-glow: 0 0 20px color-mix(in srgb, var(--color-main, #6366f1) 30%, transparent);
}

/* ========== BASE STYLES ========== */
body {
    background: var(--color-bg);
    color: var(--color-text);
    transition: background 0.25s ease, color 0.25s ease;
}

/* ========== TYPOGRAPHY & LINKS ========== */
a {
    color: var(--color-link);
    text-decoration: none;
    position: relative;
}

a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 0;
    background: var(--color-link);
    transition: width 0.25s ease;
}

a:hover {
    color: var(--color-main-hover);
}

#content a:hover::after {
    width: 100%;
}

/* ========== COMPONENTS ========== */
.btn {
    background: var(--color-main);
    color: #fff;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background 0.25s ease;
}

.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.5s;
}

.btn:hover::before {
    left: 100%;
}

.btn:hover {
    background: var(--color-main-hover);
}

/* Gradient Button */
.btn-grad {
    background: var(--gradient-main);
    color: white;
    transition: background 0.4s ease;
}

.btn-grad:hover {
    background: var(--gradient-main-hover);
}

/* Card */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--card-shadow);
    border-radius: 12px;
    padding: 1.25rem;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

/* ========== FORM ELEMENTS ========== */
input,
textarea,
select {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-main);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-main) 10%, transparent);
}

/* ========== TABLES ========== */
table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 0.5rem;
    border: 1px solid var(--color-border);
}

th {
    color: var(--color-main);
    background: var(--color-surface);
}

/* ========== BLOCKQUOTES ========== */
blockquote {
    border-left: 4px solid var(--color-main);
    padding-left: 1rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin: 1rem 0;
}

/* ========== LISTS ========== */
ul,
ol {
    padding-left: 1.25rem;
    margin: 0.5rem 0;
}

li {
    margin-bottom: 0.25rem;
}