/* =========================================================
   myEDHLeague — SITE THEME (light + dark)
   Palette from the brand kit:
     navy #19213F · gold #DDAC5E · light gold #F7E181 · cream #FFFFB2
   Display face: Rocket Vintage (headings only; body stays system UI)

   How it works:
     - includes/theme.php prints a tiny inline script in <head> that sets
       <html data-theme="light|dark"> from the user's Appearance setting
       (Profile > Settings), falling back to the device preference.
     - Token sets below are keyed on that attribute. They use the same names
       the plugins already reference (--color-bg-*, --color-text-*, --color-accent*)
       plus semantic ones (--accent-text, --color-on-accent, --hero-bg ...).
     - The "generated" block at the bottom maps every color the plugin
       stylesheets used to hardcode; see the note there before editing.
     - Component rules only read tokens, so they serve both themes.
   ========================================================= */

@font-face {
    font-family: "Rocket Vintage";
    src: url("../fonts/rocket-vintage.ttf") format("truetype");
    font-display: swap;
}

/* ---------- Shared brand constants ---------- */
/* Component rules below are prefixed with :root only to out-rank the
   plugin stylesheets; tokens are keyed on <html data-theme>. */
:root {
    --brand-navy:        #19213F;
    --brand-gold:        #DDAC5E;
    --brand-gold-light:  #F7E181;
    --brand-cream:       #FFFFB2;
    --brand-gold-deep:   #B8893F;
    --font-display:      "Rocket Vintage", Georgia, serif;
}

/* =========================================================
   DARK TOKENS
   ========================================================= */
html[data-theme="dark"],
:root:not([data-theme]) {
    color-scheme: dark;
    --color-bg-primary:      #0D1226;
    --color-bg-secondary:    #161D38;
    --color-bg-tertiary:     #131931;
    --color-bg-card:         #1D2647;
    --color-bg-input:        #242E54;
    --color-bg-raised:       #2A3770;   /* selected / highlighted surface */
    --color-bg-subtle:       rgba(150, 168, 240, 0.06);

    --color-border-subtle:   rgba(221, 172, 94, 0.14);
    --color-border-medium:   rgba(221, 172, 94, 0.24);
    --color-border-input:    #3A4570;

    --color-text-primary:    #FBF8EC;
    --color-text-secondary:  #BBBED2;
    --color-text-muted:      #9CA1BF;
    --color-text-dim:        #959BBA;

    --color-accent:          #DDAC5E;
    --color-accent-primary:  #DDAC5E;
    --color-accent-dark:     #B8893F;
    --color-accent-hover:    #F7E181;
    --color-accent-focus:    #F7E181;

    --color-success:         #4CC38A;
    --color-danger:          #C63B34;
    --color-danger-hover:    #A9302A;
    --color-warning:         #F7E181;
    --color-info:            #3A4C96;
    --color-info-hover:      #30407F;

    /* text that sits ON a fill */
    --color-on-accent:       #19213F;   /* navy on gold */
    --color-on-fill:         #FFFFFF;   /* white on red / green / navy */
    --warning-text:          #F7E181;
    --color-win:             #4CC38A;
    --color-loss:            #F08A84;

    /* semantic */
    --accent-text:           #F7E181;   /* gold used AS TEXT (links, active labels) */
    --link:                  #DDAC5E;
    --link-hover:            #F7E181;
    --heading-color:         #F7E181;
    --sidebar-heading:       #B8893F;
    --selected-text:         #FFFFB2;
    --hover-tint:            rgba(221, 172, 94, 0.08);
    --outline-border:        rgba(221, 172, 94, 0.55);
    --danger-text:           #F08A84;
    --danger-border:         rgba(229, 83, 75, 0.6);
    --danger-tint:           rgba(229, 83, 75, 0.14);
    --header-bg:             #19213F;
    --header-border:         rgba(221, 172, 94, 0.45);
    --header-shadow:         0 6px 24px rgba(0, 0, 0, 0.35);
    --footer-bg:             #19213F;
    --hero-bg:
        radial-gradient(120% 140% at 100% 0%, rgba(221, 172, 94, 0.16) 0%, rgba(221, 172, 94, 0) 55%),
        linear-gradient(160deg, #222B52 0%, #19213F 55%, #121833 100%);
    --hero-title:            #FFFFB2;
    --hero-title-shadow:     0 2px 0 rgba(0, 0, 0, 0.35);
    --hero-emblem-opacity:   0.14;
    --thead-bg:              #19213F;
    --thead-text:            #B8893F;
    --warning-bg:            rgba(0, 0, 0, 0.35);
    --tooltip-bg:            #19213F;
    --tooltip-text:          #FBF8EC;
    --shadow-card:           0 1px 0 rgba(255, 255, 178, 0.04) inset, 0 10px 30px rgba(0, 0, 0, 0.25);
    --shadow-pop:            0 24px 60px rgba(0, 0, 0, 0.55);
    --focus-ring:            rgba(221, 172, 94, 0.2);
    --selection:             rgba(221, 172, 94, 0.35);
    --card-border:           rgba(221, 172, 94, 0.35);
    --card-shadow:           0 1px 0 rgba(255, 255, 178, 0.04) inset, 0 10px 28px rgba(0, 0, 0, 0.45);

    /* Kadence global palette */
    --global-palette1: #DDAC5E;
    --global-palette2: #DDAC5E;
    --global-palette3: #FBF8EC;
    --global-palette4: #FBF8EC;
    --global-palette5: #BBBED2;
    --global-palette6: #9CA1BF;
    --global-palette7: #161D38;
    --global-palette8: #131931;
    --global-palette9: #0D1226;
    --global-palette15: var(--accent-text);         /* extra slot, off-brand orange in the Customizer; used for inline text highlights */
    --global-palette-btn-bg: #DDAC5E;
    --global-palette-btn-bg-hover: #F7E181;
    --global-palette-btn: #19213F;
    --global-palette-btn-hover: #19213F;
    --global-palette-highlight: var(--link);          /* Kadence's color for every <a> */
    --global-palette-highlight-alt: var(--link-hover);
}

/* =========================================================
   LIGHT TOKENS
   Parchment + navy ink. Brand gold is a FILL color only here
   (gold text on parchment is ~2:1); gold-as-text uses deep gold #7A5410.
   ========================================================= */
html[data-theme="light"] {
    color-scheme: light;
    --color-bg-primary:      #F5F0E3;   /* parchment page */
    --color-bg-secondary:    #EDE6D3;
    --color-bg-tertiary:     #F0EADB;
    --color-bg-card:         #FFFDF7;   /* off-white cards */
    --color-bg-input:        #FFFFFF;
    --color-bg-raised:       #F3E2BC;   /* selected: warm gold wash (no mud on light) */
    --color-bg-subtle:       rgba(25, 33, 63, 0.035);

    --color-border-subtle:   rgba(25, 33, 63, 0.10);
    --color-border-medium:   rgba(25, 33, 63, 0.18);
    --color-border-input:    #CFC4A6;

    --color-text-primary:    #19213F;   /* navy ink */
    --color-text-secondary:  #454D6E;
    --color-text-muted:      #535A7A;
    --color-text-dim:        #535A7A;

    --color-accent:          #DDAC5E;
    --color-accent-primary:  #DDAC5E;
    --color-accent-dark:     #B8893F;
    --color-accent-hover:    #E9C27A;
    --color-accent-focus:    #B8893F;

    --color-success:         #176B3F;   /* text-safe on tinted parchment; white text ok */
    --color-danger:          #C63B34;
    --color-danger-hover:    #A9302A;
    --color-warning:         #F7E181;
    --color-info:            #2A3770;
    --color-info-hover:      #19213F;

    --color-on-accent:       #19213F;
    --color-on-fill:         #FFFFFF;
    --warning-text:          #7A5410;
    --color-win:             #166534;
    --color-loss:            #B91C1C;

    --accent-text:           #7A5410;
    --link:                  #7A5410;
    --link-hover:            #19213F;
    --heading-color:         #19213F;
    --sidebar-heading:       #7A5410;
    --selected-text:         #19213F;
    --hover-tint:            rgba(221, 172, 94, 0.16);
    --outline-border:        #B8893F;
    --danger-text:           #B42318;
    --danger-border:         rgba(180, 35, 24, 0.55);
    --danger-tint:           rgba(198, 59, 52, 0.08);
    --header-bg:             #FFFDF7;
    --header-border:         rgba(184, 137, 63, 0.6);
    --header-shadow:         0 4px 18px rgba(25, 33, 63, 0.08);
    --footer-bg:             #EDE6D3;
    --hero-bg:
        radial-gradient(120% 140% at 100% 0%, rgba(221, 172, 94, 0.28) 0%, rgba(221, 172, 94, 0) 55%),
        linear-gradient(160deg, #FFFDF7 0%, #F8F0DC 55%, #F1E3C1 100%);
    --hero-title:            #19213F;
    --hero-title-shadow:     none;
    --hero-emblem-opacity:   0.11;
    --thead-bg:              #19213F;   /* navy table heads anchor the light page */
    --thead-text:            #F7E181;
    --warning-bg:            #FBF0D3;
    --tooltip-bg:            #19213F;
    --tooltip-text:          #FBF8EC;
    --shadow-card:           0 1px 2px rgba(25, 33, 63, 0.06), 0 8px 24px rgba(25, 33, 63, 0.06);
    --shadow-pop:            0 24px 60px rgba(25, 33, 63, 0.25);
    --focus-ring:            rgba(184, 137, 63, 0.25);
    --selection:             rgba(221, 172, 94, 0.45);
    --card-border:           rgba(184, 137, 63, 0.45);
    --card-shadow:           0 1px 2px rgba(25, 33, 63, 0.06), 0 6px 18px rgba(25, 33, 63, 0.08);

    --global-palette1: #7A5410;
    --global-palette2: #DDAC5E;
    --global-palette3: #19213F;
    --global-palette4: #19213F;
    --global-palette5: #454D6E;
    --global-palette6: #5E6585;
    --global-palette7: #EDE6D3;
    --global-palette8: #F5F0E3;
    --global-palette9: #FFFDF7;
    --global-palette15: var(--accent-text);         /* extra slot, off-brand orange in the Customizer; used for inline text highlights */
    --global-palette-btn-bg: #DDAC5E;
    --global-palette-btn-bg-hover: #E9C27A;
    --global-palette-btn: #19213F;
    --global-palette-btn-hover: #19213F;
    --global-palette-highlight: var(--link);          /* Kadence's color for every <a> */
    --global-palette-highlight-alt: var(--link-hover);
}

/* =========================================================
   COMPONENT RULES (theme-agnostic; read tokens only)
   ========================================================= */
:root body,
:root #wrapper {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
}
:root ::selection { background: var(--selection); color: var(--color-text-primary); }

/* ---------- Header ---------- */
:root #masthead,
:root .site-header-row-container-inner,
:root .site-main-header-wrap .site-header-row-container-inner {
    background: var(--header-bg) !important;
}
:root #masthead {
    border-bottom: 1px solid var(--header-border);
    box-shadow: var(--header-shadow);
}
/* Desktop header (Kadence's 1025px+ layout) is sticky: once scrolled, the row
   turns position:fixed and #masthead - with its border - scrolls away. Put the
   border on the row itself so it travels with it. (Kadence's item-is-stuck
   class isn't a reliable hook - it can stay item-at-start while fixed.) */
@media (min-width: 1025px) {
    :root #masthead {
        border-bottom: 0;
        box-shadow: none;
    }
    :root #masthead .kadence-sticky-header {
        border-bottom: 1px solid var(--header-border);
        box-shadow: var(--header-shadow);
    }
}
:root .site-branding .site-title {
    font-size: 0 !important;
    line-height: 0;
    width: 172px;
    height: 54px;
    margin-left: 16px;
    background: url("../images/brand/logo-horizontal.png") left center / contain no-repeat;
}
:root .header-navigation .menu > .menu-item > a,
:root .header-navigation .menu > .menu-item > .myedh-leagues-toggle,
:root .mobile-toggle-open-container .menu-toggle-open {
    color: var(--color-text-primary) !important;
    font-weight: 600;
    letter-spacing: 0.01em;
}
:root .header-navigation .menu > .menu-item > a:hover,
:root .header-navigation .menu > .menu-item.current-menu-item > a {
    color: var(--accent-text) !important;
}
:root .header-navigation .header-menu-container ul ul.sub-menu {
    background: var(--header-bg) !important;
    border: 1px solid var(--color-border-medium);
}
:root .header-navigation .header-menu-container ul ul.sub-menu .menu-item > a,
:root .header-navigation .header-menu-container ul ul.sub-menu .menu-item > span {
    color: var(--color-text-primary);
}
:root .header-navigation .header-menu-container ul ul.sub-menu .menu-item > a:hover {
    background: var(--hover-tint);
    color: var(--accent-text);
}
:root #mobile-drawer .drawer-inner {
    background: var(--header-bg);
    color: var(--color-text-primary);
}
/* Kadence colors drawer links with a palette color meant for its dark drawer
   (near-white parchment in light mode) - take them from the theme instead. */
:root #mobile-drawer .mobile-navigation ul li > a,
:root #mobile-drawer .mobile-navigation ul li > .myedh-leagues-toggle,
:root #mobile-drawer .mobile-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap,
:root #mobile-drawer .drawer-header .drawer-toggle {
    color: var(--color-text-primary) !important;
}
:root #mobile-drawer .mobile-navigation ul li > a:hover,
:root #mobile-drawer .mobile-navigation ul li.current-menu-item > a {
    color: var(--accent-text) !important;
}
:root #mobile-drawer .mobile-navigation ul li > a,
:root #mobile-drawer .mobile-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap,
:root #mobile-drawer .mobile-navigation .myedh-leagues-menu-item > .myedh-leagues-toggle {
    border-color: var(--color-border-subtle) !important;
}

/* ---------- Footer ---------- */
:root #colophon {
    background: var(--footer-bg);
    border-top: 1px solid var(--color-border-subtle);
    color: var(--color-text-muted);
}
:root #colophon a { color: var(--link); }

/* ---------- Display type ---------- */
:root .league-page-title,
:root .league-page-modern h2,
:root .profile-card .card-header h2,
:root .sidebar-title h2,
:root .modal h2,
:root .modal h3,
:root .dm-modal h2,
:root .dm-modal h3,
:root #createLeagueModal h2,
:root #createLeagueModal h3,
:root #player-decks-title,
:root #deck-detail-panel h2 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.03em;
    color: var(--heading-color);
}
/* Section headings, a step up from the plugins' own sizes (2026-10-09) */
:root .profile-card .card-header h2 { font-size: 26px !important; }
:root .league-tab-content .tab-inner > h2 { font-size: 34px; line-height: 1.15; }
:root .league-tab-content .rules-header h3 { font-size: 26px; }
@media (max-width: 640px) {
    :root .profile-card .card-header h2 { font-size: 23px !important; }
    :root .league-tab-content .tab-inner > h2 { font-size: 29px; }
    :root .league-tab-content .rules-header h3 { font-size: 23px; }
}
:root .sidebar-title h2 { color: var(--accent-text); font-size: 20px; }

/* ---------- League hero ---------- */
:root .league-hero {
    position: relative;
    overflow: hidden;
    background: var(--hero-bg);
    border-bottom: 2px solid var(--brand-gold);
}
/* Watermark: the single skull card (Logo 11), tilted as if being played and
   running off the top edge - variation 4 of the hero mockups (2026-10-09). */
:root .league-hero::after {
    content: "";
    position: absolute;
    right: 9%;
    top: -24px;
    width: 254px;
    height: 400px;
    transform: rotate(12deg);
    background: url("../images/brand/emblem-card.png") center / contain no-repeat;
    opacity: var(--hero-emblem-opacity);
    pointer-events: none;
}
@media (max-width: 640px) {
    :root .league-hero::after { right: -36px; top: -16px; width: 160px; height: 252px; }
}
:root .league-hero-content { position: relative; z-index: 1; }
:root .league-page-title {
    color: var(--hero-title);
    font-size: 44px;
    text-shadow: var(--hero-title-shadow);
}
:root .league-hero,
:root .league-hero .league-page-subtitle,
:root .league-hero p { color: var(--color-text-secondary); }
:root .league-hero strong { color: var(--accent-text); }
:root .league-hero .action-btn { border-radius: var(--radius-md); font-weight: 700; }

/* ---------- League tab cards ----------
   The tabs' main cards blurred into the page; give them the card surface,
   a thin gold border and a shadow (soft navy on parchment, deep black on navy). */
:root .league-tab-content :is(
    .scoreboard-container,
    .schedule-round,
    .league-summary,
    .stats-panel,
    .stats-kpi,
    .stats-highlight,
    .match-section,
    .my-decks-wrapper,
    .rules-container
) {
    background: var(--color-bg-card);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
}
/* My Matches sections were unpadded, borderless groups until they became cards */
:root .league-tab-content .match-section {
    padding: 16px;
    border-radius: var(--radius-xl);
}

/* ---------- League sidebar ---------- */
:root .league-sidebar {
    background: var(--color-bg-tertiary);
    border-right: 1px solid var(--color-border-subtle);
}
:root .league-sidebar .tab-button { color: var(--color-text-secondary); }
:root .league-sidebar .tab-button:hover {
    background: var(--hover-tint);
    color: var(--color-text-primary);
}
:root .league-sidebar .tab-button.active {
    background: var(--color-bg-raised);
    color: var(--selected-text);
    border-left-color: var(--brand-gold);
    font-weight: 600;
}
:root .league-sidebar-heading { color: var(--sidebar-heading); }

/* ---------- Profile sidebar + cards ---------- */
:root .profile-sidebar .sidebar-inner {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-subtle);
}
:root .sidebar-nav a:hover {
    background: var(--hover-tint);
    color: var(--accent-text);
}
:root .profile-card { box-shadow: var(--shadow-card); }
:root .profile-card .card-header { border-bottom: 1px solid var(--color-border-subtle); }

/* ---------- Links, inputs, tables ---------- */
:root .league-page-modern a:not([class*="btn"]):not([class*="button"]):not(.tab-button),
:root .profile-layout a:not([class*="btn"]):not([class*="button"]):not(.sidebar-nav a) {
    color: var(--link);
}
:root .league-page-modern a:not([class*="btn"]):not([class*="button"]):hover,
:root .profile-layout a:not([class*="btn"]):not([class*="button"]):hover {
    color: var(--link-hover);
}
:root input:focus,
:root select:focus,
:root textarea:focus {
    border-color: var(--brand-gold) !important;
    box-shadow: 0 0 0 3px var(--focus-ring) !important;
    outline: none;
}
:root input[type="checkbox"],
:root input[type="radio"],
:root input[type="range"],
:root progress { accent-color: var(--brand-gold); }
/* Kadence Advanced Form blocks (e.g. the /closed-beta/ sign-up). The block
   saves dark-only colors per form (color-scheme: dark, #2a2a2a inputs) and a
   label on --global-palette9, which is the darkest navy in our dark palette
   and cream in light - invisible in both. */
:root .wp-block-kadence-advanced-form {
    color-scheme: inherit;
    --kb-form-text-color: var(--color-text-primary);
    --kb-form-background-color: var(--color-bg-input);
    --kb-form-border-color: var(--color-border-input);
    --kb-form-placeholder-color: var(--color-text-muted);
}
:root .wp-block-kadence-advanced-form .kb-adv-form-field .kb-adv-form-label {
    color: var(--color-text-primary);
}
:root .wp-block-kadence-advanced-form .kb-advanced-form .kb-field {
    color: var(--color-text-primary);
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border-input);
}
:root table thead th,
:root table thead tr {
    background-color: var(--thead-bg);
    color: var(--thead-text);
    letter-spacing: 0.04em;
}
/* th children (sort buttons, "#") set their own color - force header ink */
:root table thead th,
:root table thead th * { color: var(--thead-text) !important; }
:root table thead th { background-color: var(--thead-bg) !important; }
:root .point-adjust-input,
:root .rule-points-input {
    border-color: var(--color-border-input) !important;
    background: var(--color-bg-input);
    color: var(--color-text-primary);
}

/* ---------- Buttons: one hierarchy everywhere ----------
   primary = solid gold + navy text (handled for plugin buttons by recolor.js)
   secondary = gold outline · destructive = red outline */
:root #confirm-add-rule,
:root #confirm-start-season {
    background: var(--brand-gold) !important;
    border-color: var(--brand-gold) !important;
    color: var(--brand-navy) !important;
    font-weight: 700;
}
:root #confirm-add-rule:hover,
:root #confirm-start-season:hover {
    background: var(--color-accent-hover) !important;
    border-color: var(--color-accent-hover) !important;
}
:root .back-btn,
:root .slide-panel-header .close-btn,
:root .copy-deck-btn,
:root #clear-notifications-btn {
    background: transparent !important;
    color: var(--accent-text) !important;
    border: 1px solid var(--outline-border) !important;
}
:root .back-btn:hover,
:root .slide-panel-header .close-btn:hover,
:root .copy-deck-btn:hover,
:root #clear-notifications-btn:hover {
    background: var(--color-bg-raised) !important;
    color: var(--selected-text) !important;
}
:root .league-hero .action-btn.delete,
:root .kick-deck-btn {
    background: transparent !important;
    color: var(--danger-text) !important;
    border: 1px solid var(--danger-border) !important;
}
:root .league-hero .action-btn.delete:hover,
:root .kick-deck-btn:hover { background: var(--danger-tint) !important; }
:root #close-invite-modal {
    background: transparent !important;
    color: var(--color-text-secondary) !important;
    border: 1px solid var(--color-border-medium) !important;
}

/* ---------- Badges ---------- */
:root .you-badge {
    background: var(--color-bg-raised) !important;
    color: var(--accent-text) !important;
    border: 1px solid var(--outline-border);
}

/* ---------- Modals / panels ---------- */
:root .modal-content,
:root .dm-modal-content,
:root #createLeagueModal .modal-content {
    border: 1px solid var(--color-border-medium);
    box-shadow: var(--shadow-pop);
}
:root .modal-content h2 { border-bottom-color: var(--outline-border) !important; }
:root .match-chat-panel {
    background: var(--color-bg-secondary) !important;
    border: 1px solid var(--color-border-medium);
    box-shadow: var(--shadow-pop);
}
:root .deck-type-header {
    color: var(--accent-text);
    border-bottom: 1px solid var(--color-border-subtle);
    letter-spacing: 0.06em;
}

/* Scoreboard player details: selected round + selected seat */
:root .round-points.active {
    background: var(--color-bg-raised) !important;
    box-shadow: inset 0 -2px 0 var(--brand-gold);
}
:root .round-points.clickable:hover { color: var(--link-hover) !important; }
:root .seat-card { background: var(--color-bg-card) !important; }
:root .seat-card.active-player {
    background: var(--color-bg-raised) !important;
    border-color: var(--brand-gold) !important;
    box-shadow: 0 0 0 1px rgba(221, 172, 94, 0.35), var(--shadow-card);
}
:root .seat-card.active-player .seat-card-name,
:root .seat-card.active-player strong { color: var(--selected-text); }
:root .match-detail-panel {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-medium) !important;
}

/* ---------- Toasts ---------- */
:root .toast { box-shadow: var(--shadow-pop); border: 1px solid var(--color-border-subtle); }
:root .toast-warning { color: var(--brand-navy) !important; font-weight: 600; }
html[data-theme="dark"] .toast-success { color: var(--brand-navy) !important; font-weight: 600; }
html[data-theme="light"] .toast-success { color: #FFFFFF !important; font-weight: 600; }

/* ---------- Tooltips ---------- */
:root .luc-tip {
    background: var(--tooltip-bg) !important;
    border: 1px solid rgba(221, 172, 94, 0.5);
    color: var(--tooltip-text) !important;
    box-shadow: var(--shadow-pop);
}
:root .luc-info:hover,
:root .luc-info:focus-visible {
    color: var(--accent-text);
    border-color: var(--brand-gold);
}

/* ---------- Notifications ---------- */
/* Kadence's global button rule gives every <button> navy text (for gold fills);
   ghost/icon buttons that clear the background need theme text back. */
:root .notification-dismiss-btn { color: var(--color-text-secondary) !important; }
:root .notification-dismiss-btn:hover { color: var(--accent-text) !important; }
:root .notification-item.unread { border-left-color: var(--brand-gold) !important; }
:root .notification-action { text-decoration: none !important; }

/* ---------- Banners ---------- */
/* "Settings locked" banner: plugin uses a 50% black well; give it a real warning surface */
:root .settings-locked-banner {
    background: var(--warning-bg) !important;
    border-color: var(--outline-border) !important;
    color: var(--accent-text) !important;
}

/* =========================================================
   GENERATED LEGACY TOKENS
   The plugin stylesheets used to hardcode ~460 purple/slate/white colors.
   Each one was replaced with one of these tokens (2026-10-09 conversion);
   the dark value reproduces the approved brand-dark mockup, the light value
   the approved light mockup. Naming: --<role>-<source family>[-<alpha%>],
   role = text | bg | line | glow. When editing plugin CSS, prefer the
   semantic tokens above; reuse one of these only to match an existing look.
   ========================================================= */
html[data-theme="dark"], :root:not([data-theme]) {
    --bg-accent-05: rgba(90, 110, 210, 0.15);
    --bg-accent-08: rgba(90, 110, 210, 0.24);
    --bg-accent-10: rgba(90, 110, 210, 0.3);
    --bg-accent-15: rgba(90, 110, 210, 0.45);
    --bg-accent-18: rgba(90, 110, 210, 0.45);
    --bg-accent-20: rgba(90, 110, 210, 0.45);
    --bg-accent-25: rgba(90, 110, 210, 0.45);
    --bg-accent-35: rgba(221, 172, 94, 0.35);
    --bg-accent-hover: #F7E181;
    --bg-accent-soft: #F7E181;
    --bg-accent-well: #2A3770;
    --bg-black-06: rgba(0, 0, 0, 0.06);
    --bg-black-08: rgba(0, 0, 0, 0.08);
    --bg-black-18: rgba(0, 0, 0, 0.18);
    --bg-black-20: rgba(0, 0, 0, 0.2);
    --bg-c2a2a2a: #252F56;
    --bg-c2a2e42: #252F56;
    --bg-c444444: #3A4570;
    --bg-c555555: #3A4570;
    --bg-c667eea: #19213F;
    --bg-c764ba2: #2A2350;
    --bg-focus: #F7E181;
    --bg-focus-06: rgba(90, 110, 210, 0.18);
    --bg-grey-12: rgba(187, 190, 210, 0.12);
    --bg-grey-dim: #959BBA;
    --bg-highlight-08: rgba(90, 110, 210, 0.24);
    --bg-highlight-10: rgba(90, 110, 210, 0.3);
    --bg-info: #3A4C96;
    --bg-info-08: rgba(58, 76, 150, 0.08);
    --bg-info-12: rgba(58, 76, 150, 0.12);
    --bg-info-15: rgba(58, 76, 150, 0.15);
    --bg-info-18: rgba(58, 76, 150, 0.18);
    --bg-info-25: rgba(58, 76, 150, 0.25);
    --bg-info-deep: #303F80;
    --bg-page-35: rgba(13, 18, 38, 0.35);
    --bg-page-55: rgba(13, 18, 38, 0.55);
    --bg-page-75: rgba(13, 18, 38, 0.75);
    --bg-scrim-75: rgba(13, 18, 38, 0.75);
    --bg-scrim-92: rgba(13, 18, 38, 0.92);
    --bg-warning-08: rgba(90, 110, 210, 0.24);
    --bg-warning-10: rgba(90, 110, 210, 0.3);
    --bg-warning-12: rgba(90, 110, 210, 0.36);
    --bg-warning-15: rgba(90, 110, 210, 0.45);
    --bg-warning-18: rgba(90, 110, 210, 0.45);
    --bg-white-00: rgba(150, 168, 240, 0);
    --bg-white-01: rgba(150, 168, 240, 0.01);
    --bg-white-02: rgba(150, 168, 240, 0.02);
    --bg-white-03: rgba(150, 168, 240, 0.03);
    --bg-white-04: rgba(150, 168, 240, 0.04);
    --bg-white-05: rgba(150, 168, 240, 0.05);
    --bg-white-06: rgba(150, 168, 240, 0.06);
    --bg-white-08: rgba(150, 168, 240, 0.08);
    --bg-white-10: rgba(150, 168, 240, 0.1);
    --bg-white-18: rgba(255, 255, 255, 0.18);
    --bg-white-20: rgba(255, 255, 255, 0.2);
    --bg-white-30: rgba(255, 255, 255, 0.3);
    --glow-accent-00: rgba(221, 172, 94, 0);
    --glow-accent-25: rgba(221, 172, 94, 0.25);
    --glow-accent-45: rgba(221, 172, 94, 0.45);
    --glow-focus-15: rgba(247, 225, 129, 0.15);
    --glow-focus-20: rgba(247, 225, 129, 0.2);
    --line-accent-30: rgba(221, 172, 94, 0.3);
    --line-accent-50: rgba(221, 172, 94, 0.5);
    --line-c2a2a2a: #252F56;
    --line-c2a2e42: #252F56;
    --line-c333333: #252F56;
    --line-focus: #F7E181;
    --line-grey: #BBBED2;
    --line-grey-30: rgba(187, 190, 210, 0.3);
    --line-grey-dim: #959BBA;
    --line-highlight-soft: #F7E181;
    --line-info: #3A4C96;
    --line-info-35: rgba(58, 76, 150, 0.35);
    --line-info-40: rgba(58, 76, 150, 0.4);
    --line-warning-30: rgba(221, 172, 94, 0.3);
    --line-warning-35: rgba(221, 172, 94, 0.35);
    --line-warning-50: rgba(221, 172, 94, 0.5);
    --line-white-03: rgba(150, 168, 240, 0.03);
    --line-white-06: rgba(150, 168, 240, 0.06);
    --line-white-08: rgba(150, 168, 240, 0.08);
    --line-white-10: rgba(150, 168, 240, 0.1);
    --line-white-12: rgba(150, 168, 240, 0.12);
    --line-white-15: rgba(255, 255, 255, 0.15);
    --line-white-20: rgba(255, 255, 255, 0.2);
    --line-white-25: rgba(255, 255, 255, 0.25);
    --text-accent-pale: #F7E181;
    --text-accent-soft: #DDAC5E;
    --text-c38a169: #38A169;
    --text-c7ee2a8: #7EE2A8;
    --text-c9ae6b4: #9AE6B4;
    --text-caaaaaa: #9CA1BF;
    --text-cf56565: #F56565;
    --text-cfc8181: #FC8181;
    --text-cfeb2b2: #FEB2B2;
    --text-cfed7d7: #FED7D7;
    --text-cff4d4d: #FF4D4D;
    --text-cff8a8a: #FF8A8A;
    --text-danger: #E53E3E;
    --text-highlight-soft: #F7E181;
    --text-info-soft: #F7E181;
    --text-mist: #F0EDE2;
    --text-mist-2: #E2E0D6;
    --text-white-45: rgba(255, 255, 255, 0.45);
    --text-white-50: rgba(255, 255, 255, 0.5);
    --text-white-60: rgba(255, 255, 255, 0.6);
    --text-white-85: rgba(255, 255, 255, 0.85);
}

html[data-theme="light"] {
    --bg-accent-05: rgba(221, 172, 94, 0.05);
    --bg-accent-08: rgba(221, 172, 94, 0.08);
    --bg-accent-10: rgba(221, 172, 94, 0.1);
    --bg-accent-15: rgba(221, 172, 94, 0.15);
    --bg-accent-18: rgba(221, 172, 94, 0.18);
    --bg-accent-20: rgba(221, 172, 94, 0.2);
    --bg-accent-25: rgba(221, 172, 94, 0.25);
    --bg-accent-35: rgba(221, 172, 94, 0.35);
    --bg-accent-hover: #E9C27A;
    --bg-accent-soft: #ECCE8C;
    --bg-accent-well: #F3E2BC;
    --bg-black-06: rgba(25, 33, 63, 0.015);
    --bg-black-08: rgba(25, 33, 63, 0.02);
    --bg-black-18: rgba(25, 33, 63, 0.045);
    --bg-black-20: rgba(25, 33, 63, 0.05);
    --bg-c2a2a2a: #CFC4A6;
    --bg-c2a2e42: #F7F2E6;
    --bg-c444444: #EDE6D3;
    --bg-c555555: #EDE6D3;
    --bg-c667eea: #FFFDF7;
    --bg-c764ba2: #F1E3C1;
    --bg-focus: #B8893F;
    --bg-focus-06: rgba(184, 137, 63, 0.06);
    --bg-grey-12: rgba(207, 196, 166, 0.12);
    --bg-grey-dim: #CFC4A6;
    --bg-highlight-08: rgba(221, 172, 94, 0.08);
    --bg-highlight-10: rgba(221, 172, 94, 0.1);
    --bg-info: #2A3770;
    --bg-info-08: rgba(221, 172, 94, 0.13);
    --bg-info-12: rgba(221, 172, 94, 0.19);
    --bg-info-15: rgba(221, 172, 94, 0.24);
    --bg-info-18: rgba(221, 172, 94, 0.29);
    --bg-info-25: rgba(221, 172, 94, 0.3);
    --bg-info-deep: #19213F;
    --bg-page-35: rgba(245, 240, 227, 0.35);
    --bg-page-55: rgba(245, 240, 227, 0.55);
    --bg-page-75: rgba(245, 240, 227, 0.75);
    --bg-scrim-75: rgba(25, 33, 63, 0.75);
    --bg-scrim-92: rgba(25, 33, 63, 0.92);
    --bg-warning-08: rgba(221, 172, 94, 0.08);
    --bg-warning-10: rgba(221, 172, 94, 0.1);
    --bg-warning-12: rgba(221, 172, 94, 0.12);
    --bg-warning-15: rgba(221, 172, 94, 0.15);
    --bg-warning-18: rgba(221, 172, 94, 0.18);
    --bg-white-00: rgba(184, 137, 63, 0);
    --bg-white-01: rgba(184, 137, 63, 0.016);
    --bg-white-02: rgba(184, 137, 63, 0.032);
    --bg-white-03: rgba(184, 137, 63, 0.048);
    --bg-white-04: rgba(184, 137, 63, 0.064);
    --bg-white-05: rgba(184, 137, 63, 0.08);
    --bg-white-06: rgba(184, 137, 63, 0.096);
    --bg-white-08: rgba(184, 137, 63, 0.128);
    --bg-white-10: rgba(184, 137, 63, 0.16);
    --bg-white-18: rgba(184, 137, 63, 0.22);
    --bg-white-20: rgba(184, 137, 63, 0.22);
    --bg-white-30: rgba(184, 137, 63, 0.22);
    --glow-accent-00: rgba(221, 172, 94, 0);
    --glow-accent-25: rgba(221, 172, 94, 0.25);
    --glow-accent-45: rgba(221, 172, 94, 0.45);
    --glow-focus-15: rgba(184, 137, 63, 0.15);
    --glow-focus-20: rgba(184, 137, 63, 0.2);
    --line-accent-30: rgba(221, 172, 94, 0.3);
    --line-accent-50: rgba(221, 172, 94, 0.5);
    --line-c2a2a2a: #CFC4A6;
    --line-c2a2e42: #F7F2E6;
    --line-c333333: #CFC4A6;
    --line-focus: #B8893F;
    --line-grey: #CFC4A6;
    --line-grey-30: rgba(207, 196, 166, 0.3);
    --line-grey-dim: #CFC4A6;
    --line-highlight-soft: #B8893F;
    --line-info: #2A3770;
    --line-info-35: rgba(42, 55, 112, 0.35);
    --line-info-40: rgba(42, 55, 112, 0.4);
    --line-warning-30: rgba(221, 172, 94, 0.3);
    --line-warning-35: rgba(221, 172, 94, 0.35);
    --line-warning-50: rgba(221, 172, 94, 0.5);
    --line-white-03: rgba(25, 33, 63, 0.021);
    --line-white-06: rgba(25, 33, 63, 0.042);
    --line-white-08: rgba(25, 33, 63, 0.056);
    --line-white-10: rgba(25, 33, 63, 0.07);
    --line-white-12: rgba(25, 33, 63, 0.084);
    --line-white-15: rgba(25, 33, 63, 0.105);
    --line-white-20: rgba(25, 33, 63, 0.14);
    --line-white-25: rgba(25, 33, 63, 0.175);
    --text-accent-pale: #7A5410;
    --text-accent-soft: #7A5410;
    --text-c38a169: #166534;
    --text-c7ee2a8: #166534;
    --text-c9ae6b4: #166534;
    --text-caaaaaa: #454D6E;
    --text-cf56565: #B42318;
    --text-cfc8181: #B42318;
    --text-cfeb2b2: #991B1B;
    --text-cfed7d7: #991B1B;
    --text-cff4d4d: #B42318;
    --text-cff8a8a: #B42318;
    --text-danger: #B42318;
    --text-highlight-soft: #7A5410;
    --text-info-soft: #2A3770;
    --text-mist: #283050;
    --text-mist-2: #283050;
    --text-white-45: rgba(25, 33, 63, 0.72);
    --text-white-50: rgba(25, 33, 63, 0.72);
    --text-white-60: rgba(25, 33, 63, 0.72);
    --text-white-85: rgba(25, 33, 63, 0.85);
}