/*
 * Honey King theme tokens — dark (default) and light.
 *
 * WHY A CHANNEL LAYER
 * The site's CSS was written against hardcoded literals: rgba(255,255,255,.08)
 * for hairlines, rgba(176,125,58,.3) for gold glows, and so on - 550+ of them
 * across four pages, at dozens of alpha values. Rather than author a second
 * colour for every one, the RGB *triplet* is a token and the alpha stays inline.
 * Re-pointing ~18 triplets re-themes the entire site, exactly, with no rounding.
 *
 * WHY THIS FILE LOADS LAST
 * Each page keeps its own inline <style> with a :root block. This sheet is
 * linked after it, so at equal specificity these declarations win. That lets the
 * theme own colour without having to strip tokens out of four inline stylesheets.
 *
 * THE TWO THEMES ARE NOT INVERSES
 * Dark is obsidian and violet - a night look. Light is warm ivory and bronze, a
 * honey daylight, because inverting a violet-black page produces a cold blue-grey
 * that fights the brand. Gold is also darkened in light mode: #b07d3a on ivory
 * is only ~2.4:1 and fails as text, while #8a5d1e clears AA.
 */

:root {
    color-scheme: dark;

    /* ── channel tokens: flip between themes ── */
    --ink-rgb: 255, 255, 255;        /* hairlines, overlays, light body text */
    --gold-rgb: 176, 125, 58;
    --shadow-rgb: 0, 0, 0;
    --bg-rgb: 7, 5, 13;              /* page ground, used for the header scrim */
    --surface-rgb: 12, 10, 18;       /* panels, and the story photo fade */
    --surface-2-rgb: 15, 12, 24;
    --surface-3-rgb: 28, 22, 36;
    --bg-deep-rgb: 6, 4, 12;
    --card-rgb: 13, 19, 32;
    --card-hi-rgb: 20, 29, 48;
    --display-rgb: 255, 252, 245;    /* display headings */
    --body-rgb: 228, 228, 231;
    --muted-rgb: 156, 163, 175;
    --ambient-a-rgb: 139, 92, 246;   /* ambient wash - violet at night */
    --ambient-b-rgb: 180, 100, 40;

    /* ── on-gold: foreground sitting on a gold button ──
       Gold stays gold in both themes, so these must NOT invert or the primary
       button ends up dark-on-dark in light mode. */
    /* Darkened from the original 180,120,64. That shade carried the near-white
       button label at only 3.9:1 - below AA in the dark theme too, so this is a
       pre-existing failure fixed here rather than a light-mode concession. */
    --gold-btn-rgb: 130, 86, 36;
    --gold-btn-hi-rgb: 156, 106, 46;
    --on-gold-rgb: 255, 250, 243;
    --on-gold: #fffaf3;

    /* ── solid surfaces ── */
    --bg-main: #07050d;
    --bg-elev-1: #0a0810;
    --bg-elev-2: #0c0a12;
    --bg-deep: #030509;

    --text-main: #f3f4f6;
    --text-muted: #9ca3af;
    --gold: #b07d3a;
    /* Nudged up from #c8944a. Gold-on-gold-tint surfaces - the active filter pill
       and the current-page nav marker - measured 4.32-4.43:1, just under AA. */
    --gold-light: #d29e54;
    --gold-glow: rgba(var(--gold-rgb), 0.3);

    --bg-card: rgba(var(--card-rgb), 0.65);
    --bg-card-hover: rgba(var(--card-hi-rgb), 0.95);
    --border-color: rgba(var(--gold-rgb), 0.15);
    --border-hover: rgba(var(--gold-rgb), 0.45);

    /* Lion mark: a crisp monochrome silhouette, never the gold artwork - at this
       size the metallic render would compete with the lit product stage.
       grayscale removes the colour, brightness puts the grey just above the ink. */
    --lion-filter: grayscale(1) brightness(1.9) contrast(0.55);
    --lion-opacity: 0.16;

    /* ── hero product stage (handoff 8a) ──
       The product's cast shadow flips: warm brown on ivory, true black on ink. */
    --product-shadow-rgb: 0, 0, 0;
}

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

    --ink-rgb: 38, 26, 12;
    --gold-rgb: 138, 93, 30;
    --shadow-rgb: 122, 96, 54;       /* warm shade, not black - black reads dirty on ivory */
    --bg-rgb: 250, 246, 238;
    --surface-rgb: 255, 252, 246;
    --surface-2-rgb: 247, 241, 231;
    --surface-3-rgb: 238, 229, 214;
    --bg-deep-rgb: 242, 235, 223;
    --card-rgb: 255, 253, 249;
    --card-hi-rgb: 252, 245, 233;
    --display-rgb: 30, 21, 9;
    --body-rgb: 68, 55, 38;
    --muted-rgb: 122, 104, 82;
    --ambient-a-rgb: 226, 176, 88;   /* honey wash replaces the violet */
    --ambient-b-rgb: 214, 150, 64;

    --bg-main: #faf6ee;
    --bg-elev-1: #f5efe3;
    --bg-elev-2: #fffcf6;
    --bg-deep: #f1e9db;

    --text-main: #241a0d;
    /* Muted and gold both sit a stop darker than a naive inversion would give:
       on ivory the dark theme's values land at 3.2-4.0:1, under AA for body text. */
    --text-muted: #5f5040;
    --gold: #744e14;
    --gold-light: #66430f;

    /* Cards can't be a 4%-alpha wash here - on ivory that is invisible. They
       become solid white with a real hairline instead. */
    --bg-card: rgba(255, 255, 255, 0.92);
    --bg-card-hover: #ffffff;
    --border-color: rgba(var(--gold-rgb), 0.22);
    --border-hover: rgba(var(--gold-rgb), 0.5);

    --lion-filter: grayscale(1) brightness(0.45) contrast(0.6);
    --lion-opacity: 0.13;

    --product-shadow-rgb: 115, 78, 21;   /* the handoff's rgba(115,78,21,.26) */
}

/* ══════════════════════════════════════════════════════════════════
   Light-mode component corrections
   Rules whose dark-mode construction does not survive a token flip.
   ══════════════════════════════════════════════════════════════════ */

/* Text shadows exist to lift light type off a dark page. On ivory they smear a
   warm halo around dark type, so they come off. */
:root[data-theme="light"] .hero-title,
:root[data-theme="light"] .story-panel h2,
:root[data-theme="light"] .story-panel p,
:root[data-theme="light"] .section-header h2,
:root[data-theme="light"] .collection-word,
:root[data-theme="light"] .page-title {
    text-shadow: none;
}

/* Cards are a 10% ink wash - readable on a dark page, but too faint on
   ivory, so light mode makes them near white. */
:root[data-theme="light"] .product-card {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(var(--gold-rgb), 0.28);
    box-shadow:
        0 8px 28px rgba(var(--shadow-rgb), 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

:root[data-theme="light"] .product-card:hover {
    background: #ffffff;
    border-color: rgba(var(--gold-rgb), 0.5);
}

/* Product photography is shot on dark packaging; a plain white tile behind it
   looks cut out. A warm tint keeps the packshots seated INSIDE a card.
   Deliberately not applied to .category-img-wrapper: those two shortcuts sit
   directly on the page with no card around them, so a tinted panel reads as a
   stray square rather than a surface. They float on the page ground instead. */
:root[data-theme="light"] .product-img-holder {
    background: linear-gradient(165deg, #fbf5e9 0%, #f3e9d6 100%);
}

/* The drawers and modals inherit a translucent dark ground. */
:root[data-theme="light"] .mobile-menu-drawer,
:root[data-theme="light"] .transparency-drawer,
:root[data-theme="light"] .compare-modal-wrapper,
:root[data-theme="light"] .product-detail-wrapper,
:root[data-theme="light"] .dropdown-menu,
:root[data-theme="light"] .region-pin-dropdown {
    background: rgba(255, 253, 248, 0.97);
    border-color: rgba(var(--gold-rgb), 0.25);
}

:root[data-theme="light"] .age-gate-card {
    background: #fffdf8;
    border-color: rgba(var(--gold-rgb), 0.3);
}

/* Primary navigation was inheriting --text-muted, which is a caption colour:
   it measured 3.3-4.4:1 in BOTH themes, under AA. Nav is not secondary text. */
header .nav-links > li > a,
header .region-btn {
    color: rgba(var(--ink-rgb), 0.92);
}

/* The active region pill is a 10% ink tint. On a dark page that reads as a
   raised chip; on ivory it is a pale grey that cannot carry light text, so in
   light mode it becomes a solid gold chip instead. */
:root[data-theme="light"] .region-btn.active,
:root[data-theme="light"] .region-pin-option.active {
    background: var(--gold);
    color: var(--on-gold);
    box-shadow: none;
}

/* Header dropdowns open on hover in each page's styles; keyboard users open
   them by tabbing in. Same declarations as the :hover rule on every page. */
.dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ── Foreground that must stay light because its surface is gold ──
   These were `color: white` and got swept to var(--text-main) with everything
   else. On a gold button that would turn dark-on-bronze in light mode. */
.product-detail-close:hover,
.btn-primary,
.btn-newsletter,
.btn-gate-yes {
    color: var(--on-gold);
}

/* The gold buttons carry a 0.92 alpha, which on a dark page reads as depth. On
   ivory the 8% bleed lifts the fill under the label below AA, so they go solid. */
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .hero .btn-primary,
:root[data-theme="light"] .btn-newsletter,
:root[data-theme="light"] .btn-gate-yes {
    background: var(--gold);
    border-color: rgba(var(--gold-rgb), 0.85);
}

:root[data-theme="light"] .btn-primary:hover,
:root[data-theme="light"] .hero .btn-primary:hover,
:root[data-theme="light"] .btn-newsletter:hover {
    background: #5c3d0f;
}

/* The active filter is a gold *tint*, not a solid pill - white label over an
   18% wash works on a dark page and vanishes on ivory. It becomes solid here. */
:root[data-theme="light"] .filter-btn.active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--on-gold);
}

/* Input surfaces were built as a dark wash (rgba(0,0,0,.3-.4)). The shadow token
   keeps them dark-ish in light mode, which renders as muddy tan, so fields get a
   real light surface. Overlays below deliberately do NOT follow - a modal scrim
   should still dim the page in light mode. */
:root[data-theme="light"] .search-input,
:root[data-theme="light"] .newsletter-input,
:root[data-theme="light"] .newsletter-form {
    background: #fffdf8;
    border-color: rgba(var(--gold-rgb), 0.32);
}

:root[data-theme="light"] .search-input::placeholder,
:root[data-theme="light"] .newsletter-input::placeholder {
    color: rgba(var(--ink-rgb), 0.5);
}

:root[data-theme="light"] .product-badge {
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-main);
}

:root[data-theme="light"] .drawer-overlay,
:root[data-theme="light"] .mobile-menu-overlay,
:root[data-theme="light"] .coa-viewer-overlay {
    background: rgba(44, 32, 14, 0.55);
}

/* Leaflet ships dark controls and attribution; on a light basemap they invert. */
:root[data-theme="light"] .leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.85) !important;
    color: #4a3a26 !important;
}

:root[data-theme="light"] .leaflet-control-attribution a {
    color: var(--gold) !important;
}

/* ══════════════════════════════════════════════════════════════════
   Theme toggle control
   ══════════════════════════════════════════════════════════════════ */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 999px;
    cursor: pointer;
    background: rgba(var(--ink-rgb), 0.06);
    border: 1px solid rgba(var(--gold-rgb), 0.32);
    color: var(--gold-light);
    transition: background 0.3s ease, border-color 0.3s ease,
                color 0.3s ease, transform 0.3s ease;
    flex: none;
}

.theme-toggle:hover {
    background: rgba(var(--gold-rgb), 0.16);
    border-color: rgba(var(--gold-rgb), 0.6);
    transform: translateY(-1px);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* One button, two glyphs: show the theme you would switch TO, which is the
   convention users read fastest. */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* Sits next to the region selector on desktop, and beside the pin on mobile. */
.nav-wrapper .theme-toggle {
    margin-left: 10px;
}

/*
 * Desktop: group the toggle with the region selector on the right.
 *
 * .nav-wrapper is justify-content: space-between, which spread its four desktop
 * children evenly and left the toggle stranded in the gap between the nav links
 * and the region pill. Auto margins on the nav list absorb the free space
 * instead, so the links stay optically centred while the two controls sit
 * together at the right edge. Scoped above the 768px breakpoint, below which the
 * links and the desktop region pill are both hidden and the toggle already sits
 * correctly beside the mobile pin.
 */
@media (min-width: 769px) {
    .nav-wrapper {
        justify-content: flex-start;
    }

    .nav-wrapper .nav-links {
        margin: 0 auto;
    }

    .nav-wrapper .theme-toggle {
        margin-left: 0;
        margin-right: 12px;
    }
}

@media (max-width: 900px) {
    .nav-wrapper .theme-toggle {
        width: 34px;
        height: 34px;
        margin-left: 6px;
    }

    .nav-wrapper .theme-toggle svg {
        width: 16px;
        height: 16px;
    }
}

/*
 * Theme changes are instant by default. Without this, `--transition: all .4s`
 * on dozens of elements staggers the repaint and the page appears to melt
 * between themes. The class is added for one frame around the switch.
 */
.hk-theme-switching,
.hk-theme-switching *,
.hk-theme-switching *::before,
.hk-theme-switching *::after {
    transition: none !important;
}

/* New York only items (the Flower category and its menu links). Every page
   toggles body.region-ny with the region switch. */
body:not(.region-ny) .ny-only {
    display: none !important;
}

/* California only items (the Product Validator and its menu links). */
body.region-ny .ca-only {
    display: none !important;
}