/**
 * Frontend Dark Theme
 * Applies theme system to login, register, and other public pages
 * Uses CSS variables that cascade automatically - no prefixes needed
 */

/* Dark mode variables (default) */
:root, [data-mode="dark"] {
    --fe-bg-primary: #1a1625;
    --fe-bg-secondary: #231e2e;
    --fe-bg-card: #2a2438;
    --fe-bg-input: #352e45;
    --fe-text-primary: #e0e0e0;
    --fe-text-secondary: #b0b0b0;
    --fe-text-muted: #808080;
    --fe-border-color: rgba(255, 255, 255, 0.1);
    --fe-accent-primary: #8b5a9e;
    --fe-accent-secondary: #c75b7a;
    --fe-link-color: #c75b7a;
    --fe-link-hover: #e07a9a;
}

/* Light mode variable overrides */
[data-mode="light"] {
    --fe-bg-primary: #f5f3f7;
    --fe-bg-secondary: #ffffff;
    --fe-bg-card: #ede8f2;
    --fe-bg-input: #ffffff;
    --fe-text-primary: #2a2035;
    --fe-text-secondary: #5a4a65;
    --fe-text-muted: #8a7a95;
    --fe-border-color: rgba(0, 0, 0, 0.1);
    --fe-link-color: #8b5a9e;
    --fe-link-hover: #6b3a7e;
}

/* =============================================
   BASE STYLES - Use variables, no prefixes
   ============================================= */

body {
    background-color: var(--fe-bg-primary);
    color: var(--fe-text-primary);
}

/* Sections and containers */
section,
.height-80 {
    background-color: var(--fe-bg-primary);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--fe-text-primary);
}

/* Text */
p {
    color: var(--fe-text-secondary);
}

/* Links */
a {
    color: var(--fe-link-color);
}
a:hover {
    color: var(--fe-link-hover);
}

/* Form inputs */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
    background-color: var(--fe-bg-input);
    border: 1px solid var(--fe-border-color);
    color: var(--fe-text-primary);
}

input::placeholder,
textarea::placeholder {
    color: var(--fe-text-muted);
}

/* Buttons - keep primary accent */
.btn--primary {
    background-color: var(--fe-accent-secondary);
    border-color: var(--fe-accent-secondary);
    color: #fff;
}

/* Alerts */
.alert {
    background-color: var(--fe-bg-card);
    border-color: var(--fe-border-color);
    color: var(--fe-text-primary);
}

/* Navigation */
.bar,
.nav-container,
nav.bar-2 {
    background-color: var(--fe-bg-secondary);
}

.menu-horizontal a,
.menu-horizontal li > a {
    color: var(--fe-text-primary);
}

/* Dropdowns */
.dropdown__container,
.dropdown__content {
    background-color: var(--fe-bg-card);
}

/* Cards and boxes */
.boxed,
.card {
    background-color: var(--fe-bg-card);
    border-color: var(--fe-border-color);
}

/* Footer */
footer,
.footer {
    background-color: var(--fe-bg-secondary);
    color: var(--fe-text-secondary);
}

/* Fine print */
.type--fine-print {
    color: var(--fe-text-muted);
}
.type--fine-print a {
    color: var(--fe-link-color);
}

/* Horizontal rules */
hr {
    border-color: var(--fe-border-color);
}

/* Logo visibility based on mode */
[data-mode="dark"] .logo-light {
    display: none !important;
}
[data-mode="light"] .logo-dark {
    display: none !important;
}