/**
 * Aesthetic Fonts - Dark Mode Styles
 *
 * @package AestheticFonts
 */

/* ============================================
   DARK MODE OVERRIDES
   ============================================ */

.dark {
    /* Colors */
    --aw-color-primary: rgb(41 151 255);
    --aw-color-secondary: rgb(41 151 255);
    --aw-color-accent: rgb(48 209 88);
    --aw-color-text-heading: rgb(245 245 247);
    --aw-color-text-default: rgb(245 245 247);
    --aw-color-text-muted: rgb(161 161 166);
    --aw-color-bg-page: rgb(5 5 5);
    --aw-color-line: rgb(38 38 40);
    --aw-color-line-strong: rgb(245 245 247);
    --aw-color-surface: rgb(18 18 18);
    --aw-color-card: rgb(18 18 18);
    --aw-color-hairline: rgb(245 245 247);
    --aw-color-accent-strong: rgb(72 255 136);
}

/* Dark mode specific adjustments */

.dark .navbar {
    background: var(--aw-color-surface);
    border-bottom-color: var(--aw-color-line);
}

.dark .nav-menu a:hover {
    background: var(--aw-color-bg-page);
}

.dark .btn-primary {
    background: var(--aw-color-text-heading);
    color: var(--aw-color-bg-page);
    border-color: var(--aw-color-text-heading);
}

.dark .btn-primary:hover {
    background: var(--aw-color-text-muted);
    border-color: var(--aw-color-text-muted);
}

.dark .font-style-card,
.dark .symbol-card,
.dark .bio-template-card,
.dark .step-card,
.dark .category-card,
.dark .platform-card,
.dark .technical-point,
.dark .faq-item,
.dark .dashboard-card,
.dark .contact-form-wrapper {
    background: var(--aw-color-card);
    border-color: var(--aw-color-line);
}

.dark .font-style-card:hover,
.dark .symbol-card:hover,
.dark .bio-template-card:hover,
.dark .step-card:hover,
.dark .category-card:hover,
.dark .platform-card:hover {
    border-color: var(--aw-color-primary);
}

.dark .input-wrapper {
    background: var(--aw-color-card);
    border-color: var(--aw-color-line);
}

.dark .input-wrapper:focus-within {
    border-color: var(--aw-color-primary);
}

.dark .font-textarea,
.dark .form-group input,
.dark .form-group textarea {
    background: var(--aw-color-card);
    border-color: var(--aw-color-line);
    color: var(--aw-color-text-default);
}

.dark .font-textarea:focus,
.dark .form-group input:focus,
.dark .form-group textarea:focus {
    border-color: var(--aw-color-primary);
}

.dark .filter-tab {
    background: var(--aw-color-card);
    border-color: var(--aw-color-line);
    color: var(--aw-color-text-default);
}

.dark .filter-tab:hover {
    border-color: var(--aw-color-primary);
    color: var(--aw-color-primary);
}

.dark .filter-tab.active {
    background: var(--aw-color-text-heading);
    color: var(--aw-color-bg-page);
    border-color: var(--aw-color-text-heading);
}

.dark .badge {
    background: var(--aw-color-bg-page);
    border-color: var(--aw-color-line);
    color: var(--aw-color-text-muted);
}

.dark .symbol-category,
.dark .technical-point {
    background: var(--aw-color-card);
    border-color: var(--aw-color-line);
}

.dark .symbol-preview,
.dark .bio-text {
    color: var(--aw-color-text-default);
}

.dark .copy-hint {
    color: var(--aw-color-text-muted);
}

.dark .platform-icon {
    background: var(--aw-color-primary);
    color: white;
}

.dark .example-text {
    background: var(--aw-color-card);
    border-color: var(--aw-color-line);
    color: var(--aw-color-text-default);
}

.dark .mapping-pair input {
    background: var(--aw-color-card);
    border-color: var(--aw-color-line);
    color: var(--aw-color-text-default);
}

.dark .preview-box {
    background: var(--aw-color-bg-page);
}

.dark .dashboard-card {
    background: var(--aw-color-card);
    border-color: var(--aw-color-line);
}

.dark .dashboard-card h3 {
    color: var(--aw-color-text-muted);
}

.dark .stat-number {
    color: var(--aw-color-primary);
}

.dark .wp-list-table {
    background: var(--aw-color-card);
    color: var(--aw-color-text-default);
}

.dark .wp-list-table th {
    background: var(--aw-color-bg-page);
    color: var(--aw-color-text-heading);
}

.dark .wp-list-table td {
    border-color: var(--aw-color-line);
}

.dark .import-help {
    background: var(--aw-color-card);
    border-color: var(--aw-color-line);
}

.dark .import-help pre {
    background: var(--aw-color-bg-page);
}

.dark .language-menu {
    background: var(--aw-color-card);
    border-color: var(--aw-color-line);
}

.dark .language-option:hover {
    background: var(--aw-color-bg-page);
}

.dark .language-option.active {
    background: var(--aw-color-bg-page);
}

/* Scrollbar styling for dark mode */

.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark ::-webkit-scrollbar-track {
    background: var(--aw-color-bg-page);
}

.dark ::-webkit-scrollbar-thumb {
    background: var(--aw-color-line);
    border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: var(--aw-color-text-muted);
}

/* Selection color */

.dark ::selection {
    color: white;
    background-color: var(--aw-color-primary);
}

/* Focus styles */

.dark :focus-visible {
    outline: 2px solid var(--aw-color-primary);
    outline-offset: 2px;
}