/* ==========================================================================
   VM Theme — Color Tokens
   Derives every hover / active / disabled / tint / on-color state from the
   small core palette set in the Customizer, using CSS color-mix().
   Loaded AFTER the inline :root vars output by vmtheme_customizer_css_vars().

   Browser support note: color-mix() is supported in all current evergreen
   browsers (Chrome/Edge 111+, Firefox 113+, Safari 16.2+). If you need to
   support older browsers, add static hex fallbacks above each color-mix()
   declaration — CSS will use the first valid value it understands and the
   color-mix() line will simply override it on supporting browsers.
   ========================================================================== */

:root {

    /* ---- Derived brand states ---- */
    --primary-hover:     color-mix(in srgb, var(--primary-color) 85%, black);
    --primary-active:    color-mix(in srgb, var(--primary-color) 70%, black);
    --primary-disabled:  color-mix(in srgb, var(--primary-color) 40%, white);
    --primary-tint:      color-mix(in srgb, var(--primary-color) 12%, white);
    /* --primary-on / --secondary-on / --accent-on (text/icon ON TOP of the brand
       fills) are admin-controlled and emitted inline by the Customizer. Consumers
       below carry a #fff fallback so they stay valid if that output is absent. */

    --secondary-hover:   color-mix(in srgb, var(--secondary-color) 85%, black);
    --secondary-active:  color-mix(in srgb, var(--secondary-color) 70%, black);
    --secondary-disabled:color-mix(in srgb, var(--secondary-color) 40%, white);
    --secondary-tint:    color-mix(in srgb, var(--secondary-color) 12%, white);

    --accent-hover:      color-mix(in srgb, var(--accent-color) 85%, black);
    --accent-active:     color-mix(in srgb, var(--accent-color) 70%, black);
    --accent-tint:       color-mix(in srgb, var(--accent-color) 12%, white);

    /* ---- Text variants ---- */
    --text-muted:        color-mix(in srgb, var(--text-color) 60%, white);
    --text-disabled:     color-mix(in srgb, var(--text-color) 35%, white);
    --text-on-dark:      #ffffff;
    --text-on-light:     var(--text-color);

    /* ---- Surfaces ---- */
    --surface-hover:     color-mix(in srgb, var(--surface-color) 92%, black);
    --surface-alt:       color-mix(in srgb, var(--background-color) 96%, black);
    --overlay-bg:        color-mix(in srgb, black 55%, transparent);
    --header-bg:         var(--background-color);
    --footer-bg:         var(--secondary-color);
    --footer-text:       var(--secondary-on, #fff);

    /* ---- Borders & dividers ---- */
    --border-subtle:     color-mix(in srgb, var(--border-color) 50%, var(--background-color));
    --border-strong:     color-mix(in srgb, var(--border-color) 70%, black);
    --focus-ring-color:  color-mix(in srgb, var(--primary-color) 60%, #1a73e8);

    /* ---- Links ---- */
    --link-hover:        color-mix(in srgb, var(--link-color) 80%, black);
    --link-active:       color-mix(in srgb, var(--link-color) 65%, black);
    --link-visited:      color-mix(in srgb, var(--link-color) 70%, var(--secondary-color));
    --link-tint:         color-mix(in srgb, var(--link-color) 12%, white);

    /* ---- Status tints (for alert/badge backgrounds) + text-safe variants ---- */
    --success-bg:        color-mix(in srgb, var(--success-color) 15%, white);
    --success-text:      color-mix(in srgb, var(--success-color) 85%, black);
    --warning-bg:        color-mix(in srgb, var(--warning-color) 18%, white);
    --warning-text:      color-mix(in srgb, var(--warning-color) 75%, black);
    --error-bg:          color-mix(in srgb, var(--error-color) 15%, white);
    --error-text:        color-mix(in srgb, var(--error-color) 85%, black);
    --info-bg:           color-mix(in srgb, var(--info-color) 15%, white);
    --info-text:         color-mix(in srgb, var(--info-color) 85%, black);

    /* ---- Status badge tokens — CANONICAL status→color source of truth ----
       One semantic bucket per status, so a given status renders the same color
       on every My Account page. Pill badges use -bg + -text together; text-only
       status labels (detail-page `.value.status-*`) use -text alone.
       Bucket assignment for each status slug lives in the badge selectors
       (assets/scss/myaccount-list.scss + style.css). Full status→token table:
       assets/MYACCOUNT-LIST-LAYOUT.md. */
    --vm-status-positive-bg:   #d4edda;  --vm-status-positive-text: #155724;
    --vm-status-progress-bg:   #fff3cd;  --vm-status-progress-text: #856404;
    --vm-status-info-bg:       #e7f1ff;  --vm-status-info-text:     #0055d4;
    --vm-status-negative-bg:   #f8d7da;  --vm-status-negative-text: #721c24;
    --vm-status-neutral-bg:    #e9ecef;  --vm-status-neutral-text:  #495057;

    /* ---- Shadows (color-aware, not just opacity) ---- */
    --shadow-color:      color-mix(in srgb, var(--secondary-color) 25%, transparent);
}


/* ==========================================================================
   1. BASE
   ========================================================================== */
body {
    background-color: var(--background-color);
    color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color);
}

hr {
    border-color: var(--border-subtle);
}


/* ==========================================================================
   2. LINKS
   ========================================================================== */
a {
    color: var(--link-color);
}
a:hover {
    color: var(--link-hover);
}
a:active {
    color: var(--link-active);
}
a:visited {
    color: var(--link-visited);
}


/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.btn,
button {
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Primary */
.btn-primary {
    background-color: var(--primary-color);
    color: var(--primary-on, #fff);
    border-color: var(--primary-color);
}
.btn-primary:hover   { background-color: var(--primary-hover); border-color: var(--primary-hover); }
.btn-primary:active  { background-color: var(--primary-active); }
.btn-primary:disabled,
.btn-primary[disabled] { background-color: var(--primary-disabled); border-color: var(--primary-disabled); cursor: not-allowed; }

/* Secondary */
.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--secondary-on, #fff);
    border-color: var(--secondary-color);
}
.btn-secondary:hover  { background-color: var(--secondary-hover); border-color: var(--secondary-hover); }
.btn-secondary:active { background-color: var(--secondary-active); }
.btn-secondary:disabled { background-color: var(--secondary-disabled); cursor: not-allowed; }

/* Outline / ghost */
.btn-outline {
    background-color: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-outline:hover { background-color: var(--primary-tint); }
.btn-outline:disabled { color: var(--text-disabled); border-color: var(--border-subtle); cursor: not-allowed; }

/* Destructive */
.btn-danger {
    background-color: var(--error-color);
    color: #ffffff;
    border-color: var(--error-color);
}
.btn-danger:hover { background-color: color-mix(in srgb, var(--error-color) 85%, black); }


/* ==========================================================================
   4. FORMS & INPUTS
   ========================================================================== */
label {
    color: var(--text-color);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea {
    background-color: var(--background-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}
input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary-color);
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 1px;
}
::placeholder {
    color: var(--text-muted);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--primary-color);
}

.form-error input,
input.is-invalid {
    border-color: var(--error-color);
}
.form-error .help-text {
    color: var(--error-text);
}
.form-success input,
input.is-valid {
    border-color: var(--success-color);
}


/* ==========================================================================
   5. NAVIGATION
   ========================================================================== */
.site-header {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border-subtle);
}

.main-navigation a {
    color: var(--text-color);
}
.main-navigation a:hover {
    color: var(--primary-color);
}
.main-navigation .current-menu-item > a {
    color: var(--primary-color);
}

.sub-menu,
.dropdown-menu {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px var(--shadow-color);
}
.sub-menu a:hover,
.dropdown-menu a:hover {
    background-color: var(--surface-hover);
}

.menu-toggle,
.menu-icon {
    color: var(--text-color);
}
.menu-toggle:hover {
    color: var(--primary-color);
}


/* ==========================================================================
   6. TABS
   ========================================================================== */
.tabs {
    border-bottom: 1px solid var(--border-color);
}
.tab {
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
}
.tab:hover {
    color: var(--link-color);
}
.tab.is-active {
    color: var(--link-color);
    border-bottom-color: var(--link-color);
}
.tab-panel-filled .tab {
    background-color: var(--surface-color);
}
.tab-panel-filled .tab.is-active {
    background-color: var(--background-color);
}


/* ==========================================================================
   7. CARDS & CONTAINERS
   ========================================================================== */
.card {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px var(--shadow-color);
}
.card.is-clickable:hover {
    box-shadow: 0 4px 10px var(--shadow-color);
    border-color: var(--border-strong);
}

.section-alt {
    background-color: var(--surface-alt);
}


/* ==========================================================================
   8. TABLES
   ========================================================================== */
table {
    border-color: var(--border-color);
}
thead th {
    background-color: var(--surface-color);
    color: var(--heading-color);
    border-bottom: 2px solid var(--border-color);
}
tbody tr:nth-child(even) {
    background-color: var(--surface-alt);
}
tbody tr:hover {
    background-color: var(--surface-hover);
}


/* ==========================================================================
   9. BADGES, TAGS & LABELS
   ========================================================================== */
.badge {
    background-color: var(--surface-color);
    color: var(--text-color);
}
.badge-primary   { background-color: var(--primary-tint);   color: color-mix(in srgb, var(--primary-color) 85%, black); }
.badge-success   { background-color: var(--success-bg);     color: var(--success-text); }
.badge-warning   { background-color: var(--warning-bg);     color: var(--warning-text); }
.badge-error     { background-color: var(--error-bg);       color: var(--error-text); }
.badge-info      { background-color: var(--info-bg);        color: var(--info-text); }


/* ==========================================================================
   10. ALERTS
   ========================================================================== */
.alert-success { background-color: var(--success-bg); color: var(--success-text); border: 1px solid var(--success-color); }
.alert-warning { background-color: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--warning-color); }
.alert-error   { background-color: var(--error-bg);   color: var(--error-text);   border: 1px solid var(--error-color); }
.alert-info    { background-color: var(--info-bg);    color: var(--info-text);    border: 1px solid var(--info-color); }


/* ==========================================================================
   11. TOOLTIPS & POPOVERS
   ========================================================================== */
.tooltip {
    background-color: var(--secondary-color);
    color: var(--secondary-on, #fff);
}
.popover {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px var(--shadow-color);
}


/* ==========================================================================
   12. PAGINATION
   ========================================================================== */
.pagination a {
    color: var(--text-color);
    border: 1px solid var(--border-color);
}
.pagination a:hover {
    background-color: var(--surface-hover);
}
.pagination .current {
    background-color: var(--link-color);
    color: var(--accent-on, #fff);
    border-color: var(--link-color);
}
.pagination .disabled {
    color: var(--text-disabled);
    cursor: not-allowed;
}


/* ==========================================================================
   13. FOCUS / ACCESSIBILITY
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
}


/* ==========================================================================
   14. ICONS
   ========================================================================== */
.icon {
    color: var(--text-color);
}
.icon:hover {
    color: var(--primary-color);
}
.btn-primary .icon,
.btn-secondary .icon {
    color: currentColor; /* inherits --primary-on / --secondary-on automatically */
}


/* ==========================================================================
   15. MODALS / OVERLAYS
   ========================================================================== */
.modal-overlay {
    background-color: var(--overlay-bg);
}
.modal {
    background-color: var(--background-color);
    box-shadow: 0 10px 30px var(--shadow-color);
}


/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.site-footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
}
.site-footer a {
    color: var(--footer-text);
}
.site-footer a:hover {
    opacity: .8;
}


/* ==========================================================================
   17. SCROLLBAR (optional polish)
   ========================================================================== */
::-webkit-scrollbar-track {
    background: var(--surface-color);
}
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 4px;
}
* {
    scrollbar-color: var(--border-strong) var(--surface-color);
}