/*
 * The Organic Atelier - Design Tokens
 */
:root {
    --color-primary: #061b0e;
    --color-secondary: #735c00;
    --color-tertiary: #201500;
    --color-background: #fbf9f5;
    --color-on-surface: #1b1c1a;
    --color-on-surface-variant: #434843;
    --color-surface-container: #efeeea;
    --color-surface-container-high: #eae8e4;
    --color-surface-container-highest: #e4e2de;
    --color-surface-container-low: #f5f3ef;
    --color-surface-container-lowest: #ffffff;
    --color-outline-variant: #c3c8c1;
    --color-secondary-container: #fed65b;
    --color-on-secondary-container: #745c00;
}

html.dark {
    --color-primary: #e2e3df;
    --color-secondary: #fed65b; 
    --color-tertiary: #d4c4a8;
    --color-background: #0f1110; 
    --color-on-surface: #e2e3df;
    --color-on-surface-variant: #c3c8c1;
    --color-surface-container: #1b1c1a;
    --color-surface-container-high: #242624;
    --color-surface-container-highest: #2d2f2d;
    --color-surface-container-low: #141513;
    --color-surface-container-lowest: #0c0e0d;
    --color-outline-variant: #434843;
    --color-secondary-container: #554400;
    --color-on-secondary-container: #ffe081;
}

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

body {
    background-color: var(--color-background);
    color: var(--color-on-surface);
    font-family: 'Manrope', sans-serif;
}

.serif-historical {
    font-family: 'Georgia', serif;
}

.synonym-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    background-color: var(--color-secondary-container);
    border: 1px solid rgba(115, 92, 0, 0.1);
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: var(--color-on-secondary-container);
    font-weight: 700;
    font-size: 1.125rem;
}

.synonym-chip:hover {
    border-color: var(--color-secondary);
    background-color: #ffe088;
    box-shadow: 0 4px 12px rgba(115, 92, 0, 0.15);
    transform: translateY(-2px);
}


/* Typography for generic content pages */
.user-content h1, .user-content h2, .user-content h3, .user-content h4 {
    color: var(--color-primary);
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}
.user-content h1 { font-size: 2.5rem; }
.user-content h2 { font-size: 1.875rem; }
.user-content h3 { font-size: 1.5rem; }
.user-content h4 { font-size: 1.25rem; }

.user-content p {
    margin-bottom: 1.5rem;
    color: var(--color-on-surface-variant);
}

.user-content strong, .user-content b {
    color: var(--color-on-surface);
    font-weight: 700;
}

.user-content a {
    color: var(--color-secondary);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--color-secondary-container);
    transition: all 0.2s;
}
.user-content a:hover {
    color: var(--color-primary);
    text-decoration-color: var(--color-primary);
}

.user-content ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--color-on-surface-variant);
}
.user-content ol {
    list-style-type: decimal;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--color-on-surface-variant);
}
.user-content li {
    margin-bottom: 0.5rem;
}

.user-content blockquote {
    border-left: 4px solid var(--color-secondary);
    padding: 1rem 1.5rem;
    margin: 2rem 0;
    background-color: var(--color-surface-container-low);
    border-radius: 0 1rem 1rem 0;
    color: var(--color-on-surface);
    font-style: italic;
}


/* Glassmorphism utility */
.glass {
    background: rgba(251, 249, 245, 0.8);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

html.dark .glass {
    background: rgba(15, 17, 16, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Shadows */
.shadow-organic {
    box-shadow: 0px 20px 40px rgba(27, 28, 26, 0.06);
}

html.dark .shadow-organic {
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.4);
}

/* --- DARK MODE OVERRIDES --- */

/* 1, 4, 7. Modal Submit / Korsord Längder / Betydelser Nummer */
html.dark .bg-primary.text-white {
    color: var(--color-background) !important;
}

/* 2. Relaterade ord (Sidebar) outline in dark mode */
html.dark aside .bg-surface-container-highest\/50 {
    background-color: var(--color-surface-container-low);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
html.dark aside .bg-surface-container-highest\/50:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--color-secondary) !important;
}

/* Wiktionary specific outline if needed */
html.dark aside .border-primary\/20 {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* 3. Etymology/Historical fade */
html.dark #dalin-gradient,
html.dark #hellquist-gradient {
    background-image: linear-gradient(to top, var(--color-background), transparent) !important;
}

/* 5. Hover effect on synonym */
html.dark .synonym-chip:hover {
    background-color: var(--color-secondary);
    color: var(--color-background);
}

/* 6. Hover effect on Begreppsklasser-pages */
html.dark .hover\:bg-white:hover {
    background-color: var(--color-surface-container-highest) !important;
    border-color: var(--color-secondary) !important;
}

/* 8. Autocomplete background & Search Icon */
html.dark .sync-autocomplete-results {
    background-color: rgba(25, 27, 26, 0.98) !important;
    border-color: rgba(255, 255, 255, 0.1);
}
html.dark .sync-search-form button.bg-primary {
    background-color: transparent !important;
    color: var(--color-secondary) !important;
    box-shadow: none !important;
}
html.dark .sync-search-form button.bg-primary:hover {
    color: var(--color-primary) !important;
}