/* =============================================================
   MASTERSETS — DESIGN TOKENS
   -------------------------------------------------------------
   Single source of truth for colour, radius, shadow and layout.

   Every value below was lifted from the existing stylesheets —
   nothing here is a new design decision. Light values come from
   the base rules in consolidated-styles.css; dark values come
   from the `html.dark-mode` block of the same file.

   HOW IT WORKS
   ------------
   `:root` holds the light theme. `html.dark-mode` re-declares the
   same custom properties with the dark values. Because every rule
   elsewhere references the token rather than a literal colour, the
   entire dark theme is this one block — no per-selector overrides.

   RULE: no hex literals in any other stylesheet. If you need a
   colour that isn't here, add a token for it here first.

   Load order matters — this file must come BEFORE every other
   first-party stylesheet.
   ============================================================= */

:root {
    /* ---------- Surfaces ---------- */
    /* Elevation scale (added 2026-07-31): panel sits below the page,
       raised floats above it. Dark values anchored on the set-list hero. */
    --ms-bg-panel:         #f6f8fa;
    --ms-border-panel:     #dde4ec;
    --ms-bg-raised:        #ffffff;

    --ms-bg-page:          #ffffff;
    --ms-bg-header:        #ffffff;
    --ms-bg-surface:       #f8f9fa;  /* card tiles, buttons, nav row */
    --ms-bg-surface-alt:   #f1f3f5;  /* token tiles, table headers   */
    --ms-bg-muted:         #e9ecef;  /* chips, printing labels       */
    --ms-bg-input:         #ffffff;
    --ms-bg-dropdown:      #ffffff;
    --ms-bg-modal:         #ffffff;
    --ms-bg-preview:       #ffffff;
    --ms-bg-image-ph:      #e9ecef;  /* image placeholder            */
    --ms-bg-logo:          #ffffff;  /* set-logo swatch              */

    /* Table + checklist striping */
    --ms-bg-table:         #ffffff;
    --ms-bg-table-head:    #f1f3f5;
    --ms-bg-table-hover:   #f9f9f9;
    --ms-bg-row-odd:       #f1f1f1;
    --ms-bg-row-even:      #ffffff;

    /* ---------- Text ---------- */
    --ms-text:             #212529;  /* body                         */
    --ms-text-strong:      #495057;  /* card names, control labels   */
    --ms-text-muted:       #6c757d;  /* card numbers, secondary      */
    --ms-text-subtle:      #555555;  /* price details                */
    --ms-text-placeholder: #6c757d;
    --ms-text-inverse:     #ffffff;

    /* ---------- Borders ---------- */
    --ms-border:           #dee2e6;  /* default                      */
    --ms-border-strong:    #ced4da;  /* form controls                */
    --ms-border-subtle:    #eeeeee;  /* hairlines, price rules       */
    --ms-border-table:     #e9ecef;

    /* ---------- Links & accents ---------- */
    --ms-link:             #0d6efd;
    --ms-link-hover:       #0a58ca;
    --ms-link-alt:         #0055aa;  /* table + price links          */
    --ms-focus-ring:       rgba(13, 110, 253, 0.25);
    --ms-focus-border:     #86b7fe;

    /* ---------- Status ---------- */
    --ms-success:          #28a745;  /* owned checkmark              */
    --ms-price-sold:       #16a34a;
    --ms-danger:           #dc3545;
    --ms-info:             #0d6efd;
    --ms-separator:        #cccccc;

    /* Dropdown item text — deliberately does NOT invert with theme.
       Kept separate from --ms-text-inverse for that reason. */
    --ms-dropdown-item-text: #212529;

    /* Empty slab-grade icon opacity */
    --ms-grade-empty-opacity:       0.3;
    --ms-grade-empty-opacity-hover: 0.6;

    /* Checklist row divider — only visible in dark mode */
    --ms-row-divider:      transparent;

    /* "OWNED" badge (the pale-green trio repeated across search/gallery) */
    --ms-owned-badge-bg:     #d4edda;
    --ms-owned-badge-text:   #155724;
    --ms-owned-badge-border: #c3e6cb;

    /* ---------- Badges ---------- */
    --ms-badge-bg:         #212529;  /* reserved-list indicator      */
    --ms-badge-text:       #ffffff;

    /* ---------- Shadows ---------- */
    --ms-shadow-sm:        0 2px 4px rgba(0, 0, 0, 0.05);
    --ms-shadow-md:        0 2px 6px rgba(0, 0, 0, 0.05);
    --ms-shadow-lg:        0 5px 15px rgba(0, 0, 0, 0.10);
    --ms-shadow-dropdown:  0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --ms-shadow-preview:   0 4px 15px rgba(0, 0, 0, 0.40);
    --ms-shadow-inset:     inset 0 1px 1px rgba(0, 0, 0, 0.05);
    --ms-submenu-bg:       rgba(0, 0, 0, 0.05);

    /* ---------- Filters (dark mode flips these) ---------- */
    --ms-logo-filter:      none;
    --ms-banner-filter:    none;
    --ms-grade-filter:     none;
    --ms-grade-empty-filter: none;
    --ms-grade-number:     var(--bs-body-color, #000);
    --ms-grade-shadow:     none;

    /* ---------- Card variant colours (theme-independent) ---------- */
    --ms-variant-normal:           #333333;
    --ms-variant-foil:             #888888;
    --ms-variant-promo:            #4b72a6;
    --ms-variant-promofoil:        #7b9cc3;
    --ms-variant-holofoil:         #4b72a6;
    --ms-variant-reverseholofoil:  #7b9cc3;
    --ms-variant-prerelease:       #a65c4b;
    --ms-variant-serialnumbered:   gold;
    --ms-variant-serialnumbered-b: darkgoldenrod;
    --ms-variant-coldfoil:         #00bcd4;
    --ms-variant-coldfoil-b:       #008fa1;

    /* ---------- Layout ---------- */
    --ms-container-max:    1400px;
    --ms-radius-xs:        2px;
    --ms-radius-sm:        3px;
    --ms-radius:           6px;
    --ms-radius-lg:        8px;
    --ms-radius-card:      24px;
    --ms-radius-preview:   29px;

    /* ---------- Type ---------- */
    --ms-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                    "Helvetica Neue", Arial, sans-serif;
}

/* =============================================================
   DARK THEME
   -------------------------------------------------------------
   Applied by the inline script in components/header.php, which
   adds .dark-mode to <html> before any CSS loads (prevents FOUC).
   Reassigning tokens here themes the whole site.
   ============================================================= */

html.dark-mode {
    /* ---------- Surfaces ---------- */
    --ms-bg-panel:         #0d1a2b;
    --ms-border-panel:     #1c2c42;
    --ms-bg-raised:        #16263c;

    --ms-bg-page:          #182433;
    --ms-bg-header:        #182433;
    --ms-bg-surface:       #2a3a50;
    --ms-bg-surface-alt:   #233143;
    --ms-bg-muted:         #3a5064;
    --ms-bg-input:         #2c3a4c;
    --ms-bg-dropdown:      #223040;
    --ms-bg-modal:         #212529;
    --ms-bg-preview:       #212529;
    --ms-bg-image-ph:      #3a4a60;
    --ms-bg-logo:          #3a4a60;

    --ms-bg-table:         #2a3a50;
    --ms-bg-table-head:    #1f2d40;
    --ms-bg-table-hover:   #343a4c;
    --ms-bg-row-odd:       #1a2a3a;
    --ms-bg-row-even:      #1d2e3f;

    /* ---------- Text ---------- */
    --ms-text:             #dee2e6;
    --ms-text-strong:      #e9ecef;
    --ms-text-muted:       #adb5bd;
    --ms-text-subtle:      #bbbbbb;
    --ms-text-placeholder: #86909a;
    --ms-text-inverse:     #000000;

    /* ---------- Borders ---------- */
    --ms-border:           #495057;
    --ms-border-strong:    #444444;
    --ms-border-subtle:    #343a40;
    --ms-border-table:     #343a40;

    /* ---------- Links & accents ---------- */
    --ms-link:             #6ea8fe;
    --ms-link-hover:       #a1c9ff;
    --ms-link-alt:         #6ea8fe;
    --ms-focus-border:     #6c757d;

    /* ---------- Status ---------- */
    --ms-price-sold:       #28a745;
    --ms-info:             #adb5bd;
    --ms-separator:        #555555;
    /* Error text muted to grey in dark, matching the old
       `#no-results-message, .error-message, .info-message` grouping. */
    --ms-danger:           #adb5bd;

    --ms-dropdown-item-text: #ffffff;

    /* Empty grade icons read slightly brighter against dark */
    --ms-grade-empty-opacity:       0.4;
    --ms-grade-empty-opacity-hover: 0.7;

    /* Dark mode gives checklist rows a visible divider */
    --ms-row-divider:      #222222;

    /* Muted green that holds contrast on a dark card */
    --ms-owned-badge-bg:     #1e3a28;
    --ms-owned-badge-text:   #7ee2a8;
    --ms-owned-badge-border: #2d5a3d;

    /* ---------- Badges (inverted in dark) ---------- */
    --ms-badge-bg:         #dee2e6;
    --ms-badge-text:       #182433;

    /* ---------- Shadows ---------- */
    --ms-submenu-bg:       rgba(255, 255, 255, 0.05);

    /* ---------- Filters ---------- */
    --ms-logo-filter:        brightness(0) invert(1);
    --ms-banner-filter:      brightness(0.85);
    --ms-grade-filter:       invert(1) brightness(0.8);
    --ms-grade-empty-filter: invert(1) brightness(0.5);
    --ms-grade-number:       #ffffff;
    --ms-grade-shadow:       1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* =============================================================
   MUSEUM THEME  (dead TCGs — `ips.living = 0`)
   -------------------------------------------------------------
   Applied by cards.php, which sets $bodyClass = 'museum-ip' when
   getIpDetails() reports living = 0. Same mechanism as dark mode:
   reassign tokens, change nothing else.

   The palette is lifted wholesale from the homepage Museum
   section in index.php (`.museum-section`, `.museum-tile`,
   `.museum-badge`) so a museum IP page and the homepage shelf are
   obviously the same place — warm brown-black surfaces, gold
   hairlines, aged-paper text.

   DARK MODE ONLY for now (MS decision 2026-08-25). In light mode a
   museum IP keeps the normal white theme; the banner artwork is
   carrying the identity there. To extend it later, add a matching
   `:root body.museum-ip` block — do NOT move these values out of
   the dark scope, the text colours below assume a dark ground.

   Lightness relationships mirror the navy scale above step for
   step, so nothing loses contrast in translation. Deliberately NOT
   touched: the base/complete/master tier colours (green/blue/
   purple) and the card variant colours — those are a semantic
   language shared with every other IP and must not drift.

   TUNING: --ms-bg-page is the one to change if the brown wants to
   be warmer or darker; the rest are anchored around it.
   ============================================================= */
html.dark-mode body.museum-ip {
    /* ---------- Surfaces ---------- */
    --ms-bg-panel:         #17110a;
    --ms-border-panel:     #2e2418;
    --ms-bg-raised:        #231a10;

    --ms-bg-page:          #1a1208;  /* homepage .museum-section gradient top */
    --ms-bg-header:        #17110a;
    --ms-bg-surface:       #33281a;
    --ms-bg-surface-alt:   #2b2115;
    --ms-bg-muted:         #4a3a24;
    --ms-bg-dropdown:      #292014;
    /* --ms-bg-input and --ms-border-strong are deliberately NOT overridden.
       Text inputs and selects keep the standard neutral dark treatment: a
       brown search field read as part of the decoration rather than as a
       control you can type into. Form controls stay the same everywhere on
       the site — the theme is the room, not the furniture. */
    --ms-bg-image-ph:      #463722;
    --ms-bg-logo:          #463722;

    --ms-bg-table:         #241b11;
    --ms-bg-table-head:    #1f1710;
    --ms-bg-table-hover:   #33281a;
    --ms-bg-row-odd:       #1e1710;
    --ms-bg-row-even:      #241b11;

    /* ---------- Text — aged paper, not blue-grey ---------- */
    --ms-text:             #e6dcc8;
    --ms-text-strong:      #f1e8d5;
    --ms-text-muted:       #a08060;  /* homepage .museum-tile-stats */
    --ms-text-subtle:      #b3a184;
    --ms-text-placeholder: #8a7a55;  /* homepage museum sub-copy    */

    /* ---------- Borders — the gold hairline from .museum-tile ---------- */
    --ms-border:           rgba(255, 200, 60, 0.16);
    --ms-border-subtle:    rgba(255, 200, 60, 0.10);
    --ms-border-table:     rgba(255, 200, 60, 0.10);

    /* ---------- Links & accents — gold, not blue ---------- */
    --ms-link:             #e8c86a;  /* homepage museum h2          */
    --ms-link-hover:       #f4dc94;
    --ms-link-alt:         #e8c86a;
    --ms-focus-border:     #c9a83a;  /* homepage .museum-badge text */
    --ms-focus-ring:       rgba(232, 200, 106, 0.25);

    --ms-separator:        #3a2d1c;
    --ms-row-divider:      #2a2015;
    --ms-badge-text:       #1a1208;

    /* ---------- App chrome ----------
       components/header.php declares --hdr-bg / --menu-bg on `html.dark-mode`
       as var(--ms-bg-header), which resolves against HTML's token value and so
       never sees a body-level override. Redeclaring the header's own variables
       here does reach it: the header element inherits custom properties from
       its nearest ancestor that declares them, and body is nearer than html.

       This is what makes the whole page brown rather than a brown page inside
       navy chrome. It covers the dropdowns and mega-menus too, which all read
       --hdr-bg / --menu-bg. */
    --hdr-bg:              #17110a;
    --hdr-border:          #2e2418;
    --hdr-hover:           #241b11;
    --menu-bg:             #17110a;
    --menu-border:         #2e2418;

    /* Form controls DO follow the theme after all. Left navy at first so a
       search field would not read as decoration — but once the whole page
       went brown the navy inputs became the only blue things on screen, which
       is worse. Kept lighter than --ms-bg-page so they still read as controls
       you can type into rather than as page. */
    --ms-bg-input:         #241b11;

    /* Warm the banner slightly rather than just dimming it. */
    --ms-banner-filter:    brightness(0.88) sepia(0.12);
}

/* The three surfaces that hardcode the navy panel colour because they are
   deliberately always-dark in BOTH themes, so they never read the token and
   would otherwise stay blue on a museum page: the set-list overview hero
   (components/set_list.php), its bottom scrim, and the site footer
   (components/footer.php). Values match --ms-bg-panel / --ms-border-panel
   above. The scrim gradient has to be restated in full — it is five brown
   stops replacing five navy ones, not a single colour.

   Scoped to dark mode with the rest of the theme: in light mode a museum page
   stays completely normal, and a brown hero over a white page would just look
   broken. Specificity (0,2,1) clears the (0,1,0) originals, which sit in inline
   <style> blocks later in the document. */
html.dark-mode body.museum-ip .sp-ov {
    background: #17110a;
    border-color: #2e2418;
}
html.dark-mode body.museum-ip .sp-ov-fade {
    background: linear-gradient(180deg,
        rgba(23, 17, 10, .16) 0%,
        rgba(23, 17, 10, .24) 38%,
        rgba(23, 17, 10, .72) 64%,
        rgba(23, 17, 10, .95) 88%,
        #17110a 100%);
}
html.dark-mode body.museum-ip .site-footer {
    background: #17110a;
    border-top-color: #2e2418;
}

/* The set-title / badge-counts / progress-bar band (components/card_gallery.css
   `.sticky-set-info`) also hardcodes the navy, in its own dark-mode rule —
   including the box-shadow, which exists to cover a subpixel gap against the
   sticky header and would leave a 2px navy hairline if only the background
   were changed. Matched to --ms-bg-page so the band reads as part of the page
   rather than a panel floating on it. */
html.dark-mode body.museum-ip .sticky-set-info {
    background-color: #1a1208;
    box-shadow: 0 -2px 0 2px #1a1208;
}

/* No `.is-stuck` treatment is needed. It used to carry a navy-to-brown
   gradient (and briefly a backdrop blur) to bridge a navy header into a brown
   page; with the header brown there is nothing to bridge, and the flat rule
   above is seamless against it whether stuck or not. */

/* ── Toolbar and nav chrome that hardcodes the blue-greys ──────────────────
   components/header.php paints a lot of its controls with literal Tailwind
   slate values — #374151 borders, #1f2937 hovers, #151923 / #0f1115 fills —
   rather than the header variables above, so recolouring --hdr-* left them
   navy while everything around them went brown. On a fully brown page those
   became the only blue things on screen.

   Warm equivalents at matching lightness, so contrast is unchanged:
     #374151 → #3a2d1c    #1f2937 → #2e2418
     #151923 → #1f1710    #0f1115 → #17110a    #2c3d58 → #3a2c15
   Every selector below mirrors one that already exists in header.php or
   set_list.php; none of this invents new UI. If a control is restyled there,
   the twin here needs the same treatment.

   NOT converted, on purpose: the .beta-badge brand blue (site identity, and
   it appears on every page), .btn-primary (a standard action button), and the
   base/complete/master tier colours in .sp-ki / .sp-seg / .sp-dot — those are
   the shared language and must not drift per IP. */
html.dark-mode body.museum-ip .ip-search-input {
    background: #1f1710;
    border-color: #2e2418;
}
html.dark-mode body.museum-ip .ip-search-input:focus {
    background: #1f1710;
    border-color: #8a6d2e;
    box-shadow: 0 0 0 3px rgba(232, 200, 106, .12);
}
html.dark-mode body.museum-ip .ip-search-results {
    background: #17110a;
    border-color: #2e2418;
}
html.dark-mode body.museum-ip .search-focus-toggle,
html.dark-mode body.museum-ip .search-focus-toggle-mobile {
    background: #2e2418;
}
html.dark-mode body.museum-ip .form-check-input {
    background-color: #3a2d1c;
    border-color: #5a4626;
}
html.dark-mode body.museum-ip .form-check-input:checked {
    background-color: #c9a83a;
    border-color: #c9a83a;
}
html.dark-mode body.museum-ip .nav-icon-btn,
html.dark-mode body.museum-ip #ipMegaTrigger,
html.dark-mode body.museum-ip #mtgMegaTrigger,
html.dark-mode body.museum-ip .btn-outline-dark {
    border-color: #3a2d1c;
}
html.dark-mode body.museum-ip .nav-icon-btn.active,
html.dark-mode body.museum-ip .nav-icon-btn:hover,
html.dark-mode body.museum-ip #ipMegaTrigger:hover,
html.dark-mode body.museum-ip #ipMegaTrigger[aria-expanded="true"],
html.dark-mode body.museum-ip #mtgMegaTrigger:hover,
html.dark-mode body.museum-ip .museum-dropdown-menu a:hover,
html.dark-mode body.museum-ip .user-dropdown-menu .user-dropdown-action:hover,
html.dark-mode body.museum-ip .user-dropdown-menu .logout-item:hover {
    background: #2e2418;
    border-color: #5a4626;
}
html.dark-mode body.museum-ip .user-dropdown-divider {
    background: #2e2418;
}
html.dark-mode body.museum-ip .header-progress-bar {
    background-color: #2e2418;
}
/* Active filter tab and view toggle on the IP landing page (set_list.php) */
html.dark-mode body.museum-ip .sp-tab.is-on {
    background: #3a2c15;
    border-color: #8a6d2e;
}
html.dark-mode body.museum-ip .sp-vb.is-on {
    background: #3a2c15;
    box-shadow: inset 0 0 0 1px #8a6d2e;
}

/* The header→page fade that used to live here is gone (2026-08-25). It was a
   fixed navy-to-brown gradient starting behind the header, solving a problem
   that only existed while the chrome stayed navy. Now that --hdr-bg is brown
   too there is no seam to hide, so the page background is the flat
   --ms-bg-page token and nothing else. Kept in Versions/ if it is ever wanted
   back. */