:root {
    --color-primary: 88 53 179;
    --color-on-primary: 255 255 255;
    --color-primary-container: 217 190 255;
    --color-on-primary-container: 31 8 104;
    --color-secondary: 110 95 138;
    --color-on-secondary: 255 255 255;
    --color-secondary-container: 209 193 245;
    --color-on-secondary-container: 33 24 58;
    --color-tertiary: 142 98 117;
    --color-on-tertiary: 255 255 255;
    --color-tertiary-container: 255 198 230;
    --color-on-tertiary-container: 55 19 35;
    --color-error: 189 33 49;
    --color-on-error: 255 255 255;
    --color-error-container: 255 219 216;
    --color-on-error-container: 75 16 14;
    --color-background: 252 249 255;
    --color-on-background: 18 15 32;
    --color-surface: 252 249 255;
    --color-on-surface: 23 18 35;
    --color-surface-variant: 234 224 238;
    --color-on-surface-variant: 56 53 71;
    --color-outline: 100 80 160;
}

html.dark {
    --color-primary: 203 146 255;
    --color-on-primary: 36 18 96;
    --color-primary-container: 99 68 166;
    --color-on-primary-container: 237 221 255;
    --color-secondary: 181 171 199;
    --color-on-secondary: 45 38 62;
    --color-secondary-container: 93 85 114;
    --color-on-secondary-container: 237 227 250;
    --color-tertiary: 236 182 224;
    --color-on-tertiary: 74 28 56;
    --color-tertiary-container: 95 57 84;
    --color-on-tertiary-container: 255 216 228;
    --color-error: 245 150 159;
    --color-on-error: 75 13 20;
    --color-error-container: 165 39 34;
    --color-on-error-container: 255 218 218;
    --color-background: 18 16 28;
    --color-on-background: 240 236 244;
    --color-surface: 21 19 33;
    --color-on-surface: 242 238 246;
    --color-surface-variant: 76 67 93;
    --color-on-surface-variant: 203 197 216;
    --color-outline: 174 154 216;
}

body {
    background: linear-gradient(135deg, rgb(var(--color-background)), rgb(var(--color-surface-variant)));
    color: rgb(var(--color-on-background));
}

.bg-background { background-color: rgb(var(--color-background)); }
.text-on-background { color: rgb(var(--color-on-background)); }
.background-surface { background-color: rgb(var(--color-surface)); }
.text-on-surface { color: rgb(var(--color-on-surface)); }
.text-on-surface-variant { color: rgb(var(--color-on-surface-variant)); }

.hero-bg-placeholder {
    background-image: radial-gradient(circle at top left, rgba(103,80,164,0.8), rgba(39,20,102,0.95));
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 120px rgba(0,0,0,0.45);
}

.card-modern {
    border: 1px solid rgb(var(--color-primary) / 0.25);
    background: linear-gradient(135deg, rgb(var(--color-surface) / 0.94), rgb(var(--color-surface-variant) / 0.9));
    backdrop-filter: blur(6px);
}

.bestiary-card {
    border-radius: 1rem;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    background: rgb(var(--color-surface-variant));
    border: 1px solid rgb(var(--color-primary) / 0.18);
    box-shadow: 0 12px 20px rgba(8,10,20,0.12);
}

.bestiary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 28px rgba(8,10,20,0.18);
}

.fade-in-section { opacity: 0; transform: translateY(12px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.fade-in-section.is-visible { opacity: 1; transform: translateY(0); }

.accent-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s, opacity 0.2s;
}

.accent-swatch.active { border-color: rgb(var(--color-primary)); }
.accent-swatch:hover { opacity: 0.8; }

#theme-toggle svg {
    width: 1.1rem;
    height: 1.1rem;
    color: rgb(var(--color-on-surface));
}

.modal-backdrop { background: rgba(5,5,10,0.8); }