/*
 * Copyright (C) 2026       Vilius Kačerginas
 * Copyright (C) 2023-2025  Yomitan Authors
 * Copyright (C) 2020-2022  Yomichan Authors
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
/* Generated Overrides for material.css */

/* Variables */
:root {
    /* --- WANCHAN DESIGN SYSTEM --- */
    /* Primary Brand Colors */
    --wanchan-amber: #f5a623;
    --wanchan-amber-light: #fcd34d;
    --wanchan-amber-dark: #d97706;

    --wanchan-purple: #7c3aed;
    --wanchan-purple-light: #a78bfa;
    --wanchan-purple-lighter: #c4b5fd;
    --wanchan-purple-lightest: #ede9fe;
    --wanchan-purple-dark: #6d28d9;
    --wanchan-purple-darker: #5b21b6;
    --wanchan-purple-base: #2e003e;

    /* Neutrals */
    --wanchan-iron: #888888;
    --wanchan-slate: #66648b;
    --wanchan-slate-light: #94a3b8;
    --wanchan-slate-dark: #475569;

    /* Surfaces - Light Mode */
    --wanchan-bg-light: #f3f4f6;      /* App Background */
    --wanchan-surface-light: #ffffff; /* Card Background */
    --wanchan-text-primary-light: #1f2937;
    --wanchan-text-secondary-light: #4b5563;
    --wanchan-border-light: #e5e7eb;

    /* Surfaces - Dark Mode Vars (Used in data-theme=dark) */
    --wanchan-bg-dark: #111827;       /* App Background - Deep Space */
    --wanchan-surface-dark: #1f2937;  /* Card Background - Dark Blue-Grey */
    --wanchan-text-primary-dark: #f9fafb;
    --wanchan-text-secondary-dark: #d1d5db;
    --wanchan-border-dark: #374151;

    /* --- YOMITAN MAPPINGS --- */
    --font-size-no-units: 14;
    --font-size: calc(1px * var(--font-size-no-units));

    --font-size-small-no-units: 12;
    --font-size-small: calc(1em * var(--font-size-small-no-units) / var(--font-size-no-units));

    --line-height-no-units: 24; /* Increased line-height for readability (Wanchan) */
    --line-height: calc(var(--line-height-no-units) / var(--font-size-no-units));

    --animation-duration: 0.2s; /* Slightly slower, smoother animation */
    --animation-duration2: calc(var(--animation-duration) * 2);

    --checkbox-size: calc(18em / var(--font-size-no-units)); /* Larger targets */
    --icon-button-size: calc(40em / var(--font-size-no-units));
    --radio-size: calc(20em / var(--font-size-no-units));
    --toggle-size: calc(18em / var(--font-size-no-units));

    --input-font-size-no-units: 1;
    --input-font-size: calc(1em * var(--input-font-size-no-units));

    /* More spacious inputs */
    --input-spacing: calc(16em / var(--font-size-no-units));
    --input-width: calc(100em / (var(--font-size-no-units) * var(--input-font-size-no-units)) - var(--input-spacing) / 2);
    --input-width-large: calc(240em / (var(--font-size-no-units) * var(--input-font-size-no-units)));
    --input-height: calc(36em / (var(--font-size-no-units) * var(--input-font-size-no-units)));

    --input-border-radius: 8px;   /* Wanchan Roundness */
    --textarea-line-height: 1.4em;
    --textarea-padding: 0.75em;

    --material-arrow-dimension1: calc(5em / var(--font-size-no-units));
    --material-arrow-dimension2: calc(10em / var(--font-size-no-units));

    --button-border-radius: 8px; /* Wanchan Roundness */
    --button-default-shadow-params: 0 2px 4px rgba(0, 0, 0, 0.1);

    --thin-border-size: 1px;

    --menu-border-radius: 12px; /* Wanchan Roundness */
    --menu-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    --selectable-indicator-transition1:
        transform 0s ease-in-out var(--animation-duration2),
        background-color var(--animation-duration2) ease-in-out,
        opacity var(--animation-duration2) ease-in-out,
        visibility 0s ease-in-out var(--animation-duration2);
    --selectable-indicator-transition2:
        transform var(--animation-duration2) ease-in-out,
        background-color var(--animation-duration2) ease-in-out,
        opacity var(--animation-duration2) ease-in-out,
        visibility var(--animation-duration2) ease-in-out;

    /* Light Mode Default Mappings */
    --text-color: var(--wanchan-text-primary-light);
    --text-color-light1: #374151;
    --text-color-light2: var(--wanchan-text-secondary-light);
    --text-color-light3: #6b7280;
    --text-color-light4: var(--wanchan-iron);

    --background-color: var(--wanchan-bg-light);
    --background-color-light: var(--wanchan-surface-light);
    --background-color-dark1: #e5e7eb;

    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-color-off: rgba(0, 0, 0, 0);
    --shadow-color-light: rgba(0, 0, 0, 0.05);

    /* Actions - Purple for Light Mode */
    --accent-color: var(--wanchan-purple);
    --accent-color-light: var(--wanchan-purple-light);
    --accent-color-lighter: var(--wanchan-purple-lighter);
    --accent-color-lightest: var(--wanchan-purple-lightest);
    --accent-color-dark: var(--wanchan-purple-dark);

    --accent-color-transparent0: rgba(124, 58, 237, 0);
    --accent-color-transparent5: rgba(124, 58, 237, 0.05);
    --accent-color-transparent25: rgba(124, 58, 237, 0.25);

    /* Danger */
    --danger-color: #dc2626; /* Red-600 */
    --danger-color-light: #ef4444;
    --danger-color-lighter: #f87171;
    --danger-color-lightest: #fecaca;
    --danger-color-transparent0: rgba(220, 38, 38, 0);
    --danger-color-transparent5: rgba(220, 38, 38, 0.05);
    --danger-color-transparent25: rgba(220, 38, 38, 0.25);

    --success-color: #10b981; /* Emerald-500 */

    --disabled-color: #9ca3af;
    --disabled-color-light: #d1d5db;
    --disabled-color-lighter: #e5e7eb;

    /* Input Fields */
    --input-background-color: #f3f4f6;
    --input-background-color-dark: #f3f4f6;
    --input-background-color-darker: #e5e7eb;
    --input-outline-color: var(--wanchan-purple);
    --input-border-color: var(--wanchan-border-light);

    --button-default-text-color: #ffffff;
    --button-default-border-color: #d1d5db;
    --button-default-icon-color: #4b5563;
    --button-default-icon-color-light: #6b7280;

    --checkbox-checked-color: var(--accent-color);
    --checkbox-unchecked-color: #6b7280;
    --checkbox-check-color: #ffffff;
    --checkbox-disabled-color: var(--disabled-color);

    --toggle-track-color: #d1d5db;
    --toggle-knob-color: #ffffff;

    --selectable-indicator-color: rgba(124, 58, 237, 0.1);

    --menu-item-hover-color: #f3f4f6;
    --menu-item-active-color: #e5e7eb;
}


:root[data-theme=dark] {
    --text-color: var(--wanchan-text-primary-dark);
    --text-color-light1: #d1d5db;
    --text-color-light2: #9ca3af;
    --text-color-light3: #9096a2;
    --text-color-light4: #7c8a9c;

    --background-color: var(--wanchan-bg-dark);
    --background-color-light: var(--wanchan-surface-dark);
    --background-color-dark1: #1f2937;

    --shadow-color: rgba(0, 0, 0, 0.5);
    --shadow-color-off: rgba(255, 255, 255, 0);
    --shadow-color-light: rgba(255, 255, 255, 0.085);

    /* Amber Accent in Dark Mode */
    --accent-color: var(--wanchan-amber); /* Keep Amber popping */
    --accent-color-light: #fbbf24;
    --accent-color-lighter: #fcd34d;
    --accent-color-lightest: #fde68a;

    --accent-color-transparent0: rgba(245, 166, 35, 0);
    --accent-color-transparent5: rgba(245, 166, 35, 0.05);
    --accent-color-transparent25: rgba(245, 166, 35, 0.25);

    --danger-color: #ef4444;
    --danger-color-light: #dc2626;
    --danger-color-lighter: #991b1b;
    --danger-color-lightest: #7f1d1d;

    --danger-color-transparent0: rgba(239, 68, 68, 0);
    --danger-color-transparent5: rgba(239, 68, 68, 0.05);
    --danger-color-transparent25: rgba(239, 68, 68, 0.25);

    --success-color: #10b981;

    --disabled-color: #374151;
    --disabled-color-light: #4b5563;
    --disabled-color-lighter: #6b7280;

    --input-background-color: #111827;
    --input-background-color-dark: #374151;
    --input-background-color-darker: #4b5563;
    --input-outline-color: var(--wanchan-amber);
    --input-border-color: var(--wanchan-border-dark);

    --button-default-text-color: #f9fafb;
    --button-default-border-color: #374151;
    --button-default-icon-color: #9ca3af;
    --button-default-icon-color-light: #6b7280;

    --checkbox-unchecked-color: #6b7280;

    --toggle-track-color: #4b5563;
    --toggle-knob-color: #f9fafb;

    --selectable-indicator-color: rgba(245, 166, 35, 0.15);

    --menu-item-hover-color: #374151;
    --menu-item-active-color: #4b5563;
}


/* Root styles */
:root {
    font-family: Inter, Roboto, 'San Francisco', 'Segoe UI', system-ui, sans-serif;
    font-size: var(--font-size);
    line-height: var(--line-height);
    height: 100%;
}


/* Material design select */
select {
    width: var(--input-width-large);
    height: var(--input-height);
    line-height: var(--line-height);
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    box-sizing: border-box;
    padding: 0 0.5em;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: url(/images/material-down-arrow.svg);
    background-repeat: no-repeat;
    background-position: right calc(10em / var(--font-size-no-units)) center;
    background-color: var(--input-background-color);
    background-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1);
    cursor: pointer;
    color: var(--text-color);
    font-size: var(--input-font-size);
    transition: border-color var(--animation-duration) ease-in-out, box-shadow var(--animation-duration) ease-in-out;
}


select:hover {
    border-color: var(--wanchan-purple-light);
}


select:focus {
    outline: none;
    border-color: var(--wanchan-purple);
    box-shadow: 0 0 0 2px var(--accent-color-transparent25);
}


/* Light mode overrides for select */
:root:not([data-theme=dark]) select:hover {
    border-color: var(--wanchan-purple-light);
}


:root:not([data-theme=dark]) select:focus {
    border-color: var(--wanchan-purple);
}


/* Dark mode overrides for select */
:root[data-theme=dark] select:hover {
    border-color: var(--wanchan-amber-light);
}


:root[data-theme=dark] select:focus {
    border-color: var(--wanchan-amber);
}


/* Basic styling for options (browser support varies) */
select option {
    background-color: var(--background-color-light);
    color: var(--text-color);
    padding: 0.5em;
}

/* h1 themed colors */
h1 {
    color: var(--wanchan-purple);
}

:root[data-theme=dark] h1 {
    color: var(--wanchan-amber);
}