/* ------------------------------------------------
 * BASE STYLES & FONT
 * ------------------------------------------------ */
body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

/* ------------------------------------------------
 * COLOR VARIABLES (Dark Mode Default)
 * ------------------------------------------------ */
:root {
    --color-bg-primary: #0d0d0d; /* Fast Schwarz */
    --color-bg-secondary: #1a1a1a; /* Dunkelgrau für Karten */
    --color-text-primary: #f3f4f6; /* Hellgrau */
    --color-text-secondary: #a0a0a0; /* Gedämpftes Grau */
    --color-accent: #b91c1c; /* Tiefes Weinrot/Blutrot */
    --color-accent-hover: #dc2626; /* Etwas helleres Rot für Hover */
}

/* Apply Dark Mode Variables */
body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}

/* ------------------------------------------------
 * UTILITY CLASSES
 * ------------------------------------------------ */
.color-accent { color: var(--color-accent); }
.bg-accent { background-color: var(--color-accent); }
.border-accent { border-color: var(--color-accent); }
.book-card-bg { background-color: var(--color-bg-secondary); }

.book-series-gradient {
    background: linear-gradient(180deg, rgba(26,26,26,0) 0%, var(--color-bg-primary) 100%);
}

.hero-section { background-color: var(--color-bg-primary); }
.nav-link { color: var(--color-text-secondary); }
.nav-link:hover { color: var(--color-text-primary); }


/* ------------------------------------------------
 * LIGHT MODE OVERRIDES
 * ------------------------------------------------ */
html.light-mode {
    --color-bg-primary: #ffffff; /* Weiss */
    --color-bg-secondary: #f3f4f6; /* Sehr helles Grau für Karten */
    --color-text-primary: #111827; /* Dunkelgrau */
    --color-text-secondary: #4b5563; /* Gedämpftes Dunkelgrau */
    /* Akzent bleibt Rot */
}

html.light-mode body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}

html.light-mode .book-card-bg { background-color: var(--color-bg-secondary); }
html.light-mode .text-gray-300,
html.light-mode .text-gray-400,
html.light-mode .text-gray-500,
html.light-mode .text-gray-600 {
    color: var(--color-text-secondary);
}
html.light-mode .text-gray-700 { color: var(--color-text-primary); }

html.light-mode header {
    background-color: var(--color-bg-primary);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

html.light-mode .nav-link { color: var(--color-text-secondary); }
html.light-mode .nav-link:hover { color: var(--color-text-primary); }

html.light-mode .hero-section { background-color: var(--color-bg-primary); }

html.light-mode .book-series-gradient {
    background: linear-gradient(180deg, rgba(243,244,246,0) 0%, var(--color-bg-primary) 100%);
}

html.light-mode #bestellen { background-color: #f7f7f7; }
html.light-mode input {
    background-color: var(--color-bg-primary);
    border-color: #d1d5db; /* Helle Grenzfarbe */
    color: var(--color-text-primary);
}