/* =========================================================
   THEME TOKENS
========================================================= */

:root {
    color-scheme: light;

    /* =====================================================
       BRAND
    ===================================================== */


    --primary-color-hover: var(--primary-color);

    --success-color: #198754;
    --success-color-hover: #157347;

    --warning-color: #fd7e14;
    --danger-color: #dc3545;

    /* =====================================================
       BACKGROUNDS
    ===================================================== */

    --color-background: #f4f6f9;
    --color-surface: #ffffff;
    --color-surface-secondary: #f8f9fa;

    /* =====================================================
       TEXT
    ===================================================== */

    --color-text: #333333;
    --color-text-muted: #555555;
    --color-text-light: #666666;

    --color-text-inverse: #ffffff;

    /* =====================================================
       BORDERS
    ===================================================== */

    --color-border: #eeeeee;
    --color-border-soft: #dddddd;

    /* =====================================================
       TAGS / BADGES
    ===================================================== */

    --tag-background: #c6ebb878;
    --tag-text: #0b7701;
    --tag-background-hover: #bde7ad;
    --tag-text-hover: #0b7701;

    --badge-background: #e9ecef;
    --badge-text: #333333;

    --success-background: #d1e7dd;
    --success-text: #0f5132;

    --danger-background: #f8d7da;
    --danger-text: #842029;

    /* =====================================================
       SHADOWS
    ===================================================== */

    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08);

    /* =====================================================
       GRADIENTS
    ===================================================== */

    --primary-gradient:
        radial-gradient(
            ellipse at center,
            var(--primary-color) 1%,
            var(--primary-color-dark) 100%
        );

    /* =====================================================
       ICONS
    ===================================================== */

    --icon-size-line: 32px;
    --icon-size-grid: 64px;

    /* =====================================================
       TRANSITIONS
    ===================================================== */

    --theme-transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

/* =========================================================
   AUTOMATIC DARK MODE (SYSTEM)
========================================================= */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;

        --primary-color-hover: #56d13e;

        --success-color: #2ea96b;
        --success-color-hover: #3cc97f;

        --warning-color: #ff9f43;
        --danger-color: #ff6b6b;

        --color-background: #121212;
        --color-surface: #1e1e1e;
        --color-surface-secondary: #252525;

        --color-text: #f1f1f1;
        --color-text-muted: #cccccc;
        --color-text-light: #aaaaaa;

        --color-text-inverse: #ffffff;

        --color-border: #333333;
        --color-border-soft: #444444;

        --tag-background: #174f2c;
        --tag-text: #9fd6ab;
        --tag-background-hover: #5c7552;
        --tag-text-hover: #093210;


        --badge-background: #2b2b2b;
        --badge-text: #dddddd;

        --success-background: #143824;
        --success-text: #8de1b4;

        --danger-background: #4a1d22;
        --danger-text: #ffb3bc;

        --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35);
        --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.45);
    }
}

/* =========================================================
   MANUAL DARK MODE
========================================================= */

[data-theme="dark"] {
    color-scheme: dark;

    --primary-color-hover: #75acff;

    --success-color: #2ea96b;
    --success-color-hover: #3cc97f;

    --warning-color: #ff9f43;
    --danger-color: #ff6b6b;

    --color-background: #121212;
    --color-surface: #1e1e1e;
    --color-surface-secondary: #252525;

    --color-text: #f1f1f1;
    --color-text-muted: #cccccc;
    --color-text-light: #aaaaaa;

    --color-text-inverse: #ffffff;

    --color-border: #333333;
    --color-border-soft: #444444;

    --tag-background: #174f2c;
    --tag-text: #9fd6ab;
    --tag-background-hover: #5c7552;
    --tag-text-hover: #093210;

    --badge-background: #2b2b2b;
    --badge-text: #dddddd;

    --success-background: #143824;
    --success-text: #8de1b4;

    --danger-background: #4a1d22;
    --danger-text: #ffb3bc;

    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* =========================================================
   GLOBAL
========================================================= */
html {
    background-color: var(--color-background);
}
body {
    background-color: var(--color-background);
    color: var(--color-text);
    transition: var(--theme-transition);
}

/* =========================================================
   HEADER
========================================================= */

header {
    background-color: var(--primary-color);
    background-image: var(--primary-gradient);
    color: var(--color-text-inverse);
    transition: var(--theme-transition);
}
header a, header a:hover {
    color: var(--color-text-inverse);
}

/* =========================================================
   CARDS
========================================================= */

.card,
.location-card,
.application-detail-card,
.reason-card,
.attribute-card,
.breadcrumbs {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
    box-shadow: var(--shadow-card);
    transition: var(--theme-transition);
}

.card:hover,
.breadcrumbs:hover {
    box-shadow: var(--shadow-card-hover);
}

/* =========================================================
   TEXT
========================================================= */

.application-content p,
.location-description,
.reason-header,
.additional-info,
.attribute-name {
    color: var(--color-text-muted);
}

.detail-content,
.description,
.reason-body {
    color: var(--color-text);
}

/* =========================================================
   INPUTS
========================================================= */

.search-form input {
    background-color: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border-soft);
    transition: var(--theme-transition);
}

.search-form input::placeholder {
    color: var(--color-text-light);
}

/* =========================================================
   BUTTONS
========================================================= */

.search-form button,
.secondary-button,
.application .actions a, 
.application .actions button {
    background-color: var(--primary-color);
    color: var(--color-text-inverse);
    transition: var(--theme-transition);
}
.application .actions button:disabled{
    background-color: rgb(61, 61, 61);
    color: rgb(92, 92, 92);
}
.search-form button:hover,
.secondary-button:hover {
    background-color: var(--primary-color-hover);
}

.install-button {
    background-color: var(--success-color) !important;
    color: var(--color-text-inverse);
}

.install-button:hover {
    background-color: var(--success-color-hover);
}

/* =========================================================
   TAGS / BADGES
========================================================= */

.keyword-badge,
.inclusion-date,
.expiration-date {
    background-color: var(--badge-background);
    color: var(--badge-text);
    transition: var(--theme-transition);
}

.location-tag {
    background-color: var(--tag-background);
    color: var(--tag-text);
    transition: var(--theme-transition);
}

.location-tag:hover {
    background-color: var(--tag-background-hover);
    opacity: 0.9;
    color: var(--tag-text-hover);
}

.inclusion-date {
    background-color: var(--success-background);
    color: var(--success-text);
}

.expiration-date {
    background-color: var(--danger-background);
    color: var(--danger-text);
}

/* =========================================================
   BORDERS
========================================================= */

.application-detail-card hr,
.additional-info,
.breadcrumbs {
    border-color: var(--color-border);
}

/* =========================================================
   LINKS
========================================================= */

a {
    color: var(--primary-color);
    transition: var(--theme-transition);
}

a:hover {
    color: var(--primary-color-hover);
}

/* =========================================================
   SCROLLBAR (OPTIONAL)
========================================================= */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-surface);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-soft);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-light);
}

.item-link, .crumb a {
    color: var(--color-text);
}
.item-link:hover, .crumb a:hover {
    color: var(--primary-color-hover);
}