/* ==================== DARK-MODE RULES ====================
   Extracted from 01-light-mode.css, where 33 rule blocks whose every selector
   was `html.dark` had been living inside the LIGHT sheet. That file was doing
   two jobs, and a rebuild starting from it would have deleted dark-theme fixes
   by accident.

   LOADED IMMEDIATELY AFTER THE LIGHT SHEET AND BEFORE 02-core.css, so every
   rule keeps its position relative to everything outside this file. Within the
   file the original order is preserved.

   Verified before moving: only two of these share a subject AND a property with
   a non-html-prefixed rule in the light sheet - the `transition` on inputs and
   selects - and both carry !important while the bare rule does not, so the
   cascade resolves them identically wherever they sit.

   Dark mode is the DEFAULT theme (see the inline script in index.html, which
   applies .dark unless localStorage says otherwise). These are overrides on top
   of 02-core.css, not the base itself.
   ======================================================== */

/* The primary gradient in dark mode - violet-to-indigo, DARKENED 2026-09-12.
   Defined here rather than left to Tailwind utilities so that BOTH themes own
   the same class and neither depends on the CDN's class names.

   ---------------------------------------------------------------------------
   WAS #8b5cf6 -> #6366f1, AND IT FAILED BOTH WCAG CRITERIA. HANDOFF item 33.

   White label:  4.23 / 4.37 / 4.47  -- fails 1.4.3 at EVERY stop, never
                 reaching 4.5, on the most-used button in the app.
   Boundary:     2.98 at the far stop against rgb(59,36,88), the pricingModal
                 and welcomeModal panel -- fails 1.4.11 as well.

   The item previously recorded the boundary as "fine, 3.53-3.72, 0.53 of
   headroom". That was ONE ground standing in for FIVE. Real headroom: -0.02.

   NO GRADIENT CAN FIX BOTH. White text >= 4.5 needs fill luminance L <= 0.1833;
   boundary >= 3.0 against rgb(59,36,88) needs L >= 0.1869. The band is empty by
   0.0036, and luminance is hue-independent, so it is not a fact about purple -
   a sweep of the whole RGB cube returns zero colours.

   SO THE BOUNDARY MOVES OFF THE FILL AND ONTO A BORDER, which is what WCAG
   1.4.11 asks for anyway, and which is exactly what light mode does with the
   brass. ONE MECHANISM IN BOTH THEMES - gradient plus border - rather than a
   border in one and a tuned fill in the other. That is why this option was
   taken over the two alternatives, not because the diff is smaller.

   Measured at EVERY stop against ALL FIVE dark grounds, enumerated from
   production with effBG, page plus each modal opened alone:

     white label on #7C4DD6 -> #5A4FD6   5.40 / 5.70 / 5.96      (need 4.5)
     border #8F86B5 vs rgb(26,22,37)     5.27
                    vs rgb(37,32,51)     4.68
                    vs rgb(49,41,56)     4.15
                    vs rgb(45,40,87)     4.02
                    vs rgb(59,36,88)     3.95   <- the ground that made the
                                                   no-gradient-solution result
                                                   true; it must clear, and does
   --------------------------------------------------------------------------- */
html.dark .cl-gradient {
    background-image: linear-gradient(to right, #7C4DD6, #5A4FD6);
}
html.dark .cl-gradient.cl-gradient-br {
    background-image: linear-gradient(to bottom right, #7C4DD6, #5A4FD6);
}
html.dark .cl-gradient,
html.dark .cl-gradient * {
    color: #ffffff;
}

/* ---------------------------------------------------------------------------
 * text-gray-500 IN DARK MODE — WCAG 1.4.3. HANDOFF section 7 item 39, dark set.
 *
 * Tailwind's #6b7280 is a mid grey chosen for light backgrounds. On this theme's
 * panels it reaches 3.11-3.26, and 31 of the 43 dark-only text-contrast findings
 * were this one value. Every rendered instance failed -- 30 measured, 0 passing.
 *
 * THIS IS A THEME-BLIND UTILITY, which is why the fix belongs here and not in
 * markup: the stylesheets carry #6b7280 only inside html:not(.dark) rules, so
 * nothing reached dark at all. Item 22's mechanism.
 *
 * Measured after, against every ground these actually sit on:
 *
 *   rgb(37,32,51)  the dark modal panel   27 elements   6.20   (needs 4.5)
 *   rgb(42,36,54)  pricing / QR panels     2 elements   5.89   (needs 4.5)
 *   rgb(51,65,85)  bg-slate-700             1 element   4.08   (needs 3.0)
 *
 * WHY gray-400 AND NOT LIGHTER. Clearing 4.5:1 on all three grounds would have
 * demanded luminance >= 0.4063 -- about gray-300 -- which erases the muted /
 * primary distinction on 29 elements. That requirement came entirely from ONE
 * element: clientWaitlistModal's ▼, a chevron span inside a custom dropdown
 * button. A chevron is a NON-TEXT COMPONENT, so 1.4.11's 3:1 is its bar, not
 * 1.4.3's 4.5. It clears at 4.08.
 *
 * That is item 33's one-ground-standing-in-for-five, inverted: there a single
 * ground hid a failure, here a single outlier would have imposed a needless
 * change on everything else. Enumerate the grounds AND check what each element
 * actually is.
 *
 * BLAST RADIUS, stated rather than implied. This is palette-scoped:
 *   197 source occurrences (97 in index.html, 100 generated by js/)
 *    87 in the DOM at page load
 *    30 reachable and measured, all previously failing, all now clearing
 * The other ~167 are recoloured too and are UNVERIFIED. The presumption that
 * they behave like the 30 rests on their sharing the same panel colours, not on
 * measurement -- they live in authenticated and dynamic states the probe cannot
 * reach. A per-element fix was not the alternative: 100 of the occurrences are
 * generated by js/ and carry no markup to edit.
 *
 * LIGHT CANNOT BE AFFECTED, structurally: 01-light-mode.css:644's
 * html:not(.dark) .text-gray-500 and this html.dark rule are mutually exclusive.
 * tools/gray500-contrast-guards.js asserts it anyway -- a rule that cannot leak
 * is still a claim, and it costs one assertion.
 * --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   GREEN CONFIRM ACTIONS IN DARK -- WCAG 1.4.3. HANDOFF section 7 item 51.

   White on Tailwind's greens is the worst text contrast measured anywhere in
   this app: 2.28 on three confirm buttons -- approving a partner, creating an
   account, confirming a booking -- and 3.30 on two more.

   THE LABEL MOVES, NOT THE FILL, and light is the precedent rather than a new
   pattern. The from-green-500 gradient is byte-identical in both themes: NO rule
   in any stylesheet mentions it. Light passes it at 7.22 purely because
   01-light-mode.css:283's `.bg-slate-800 .text-white` darkens the label to
   --cl-text. Dark simply never had the equivalent. Darkening the fill instead
   would have meant #188841 -- a visibly different green on every use, to reach a
   ratio the label direction gets for free.

   Measured, dark, worst stop per element:

       from-green-500 -> to-emerald-500   2.28 / 2.54  ->  7.22 / 6.49
       from-green-500 -> to-teal-500      2.28 / 2.49  ->  7.22 / 6.61
       bg-green-600 solid                 3.30         ->  5.00

   The 1.4.11 boundary needs no help: green-500 is 6.91 and green-600 is 4.78
   against the rgb(37,32,51) panel, both clear of 3:1, so unlike cl-gradient
   these take no border.

   THE ENTIRE green-500 CLUSTER IS A GRADIENT, not a solid. Every one of the
   three is `bg-gradient-to-r from-green-500`; `.bg-green-500` matches exactly one
   element in the whole loaded DOM and it was never failing. A rule written
   against `.bg-green-500` would have fixed nothing and looked correct.
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   PURPLE-500 SURFACES IN DARK -- WCAG 1.4.3. HANDOFF section 7 item 51.

   THIS ONE TAKES THE FILL, AND THE GREENS ABOVE TOOK THE LABEL. The difference
   is not style, it is arithmetic: --cl-text on #a855f7 reaches only 4.16, short
   of 4.5, so the label direction available to the greens does not exist here.
   Darkening the fill to #9c4fe5 puts white at 4.50 and leaves the 1.4.11
   boundary at 3.50 against the rgb(37,32,51) panel, so no border is needed.

   #9c4fe5 is the least dark value that clears 4.5 -- white needs the fill at
   luminance <= 0.1833 and #a855f7 is 0.2154. Going further would have drifted
   the brand hue for nothing.

   THE MARGIN IS 0.003, AND THAT IS STATED BECAUSE IT MATTERS. The true ratio is
   4.5031, not 4.50 as the probe rounds it. It passes. But anything that touches
   the LABEL -- an off-white, an opacity, a hover state that lightens the fill --
   fails immediately, with no visible warning. If this ever needs headroom,
   #9A4EE2 gives 4.60 and #984CE0 gives 4.72 at hues indistinguishable by eye.

   NOT the cl-gradient family and not the shimmer: those are items 33 and 52 and
   they are violet, not purple-500. Three purples in dark is two too many, but
   consolidating them is a palette decision, not this fix.
   --------------------------------------------------------------------------- */
html.dark .bg-purple-500 {
    background-color: #9c4fe5;
}

html.dark .bg-gradient-to-r.from-green-500,
html.dark .bg-gradient-to-r.from-green-500 *,
html.dark .bg-gradient-to-r.from-green-600,
html.dark .bg-gradient-to-r.from-green-600 *,
html.dark .bg-green-600,
html.dark .bg-green-600 * {
    color: #241E1A;
}

html.dark .text-gray-500 {
    color: #9ca3af;
}
/* The 1.4.11 boundary. Interactive elements only, mirroring
   01-light-mode.css's rule exactly - cl-gradient is also on a badge span, a
   palette swatch div and an avatar circle, where a border is a visual change
   with no accessibility benefit. */
html.dark button.cl-gradient,
html.dark a.cl-gradient {
    border: 1px solid #8F86B5;
}

/* Dark mode body */
html.dark body {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

/* ============ STEP 1: WARM DARK BASE + WARM TEXT ============
   To revert: delete from this comment down through the matching END comment. */
html.dark body {
    background-color: #1a1625 !important;
    color: #f5f1ea !important;
}

html.dark {
    background-color: #1a1625 !important;
}

/* Header and footer match the warm base */
html.dark #mainHeader {
    background-color: rgba(26, 22, 37, 0.8) !important;
}

html.dark footer.bg-slate-900 {
    background-color: #1a1625 !important;
    border-top-color: rgba(212, 165, 116, 0.08) !important;
}

/* ============ STEP 1 END ============ */

/* ============ STEP 2: WARM CARD SURFACES ============
   To revert: delete from this comment down through the matching END comment. */
html.dark .bg-slate-800,
html.dark .bg-slate-800\/50,
html.dark .bg-slate-800\/80 {
    background-color: #252033 !important;
}

html.dark .bg-slate-700\/30,
html.dark .bg-slate-700\/50 {
    background-color: rgba(45, 38, 56, 0.6) !important;
}

/* Inset card footers (Posts / Reviews / Leave a Review section) */
html.dark .bg-slate-900\/30,
html.dark .bg-slate-900\/50 {
    background-color: rgba(31, 27, 46, 0.6) !important;
}

/* ============ STEP 2 END ============ */

/* ============ STEP 3: WARM FORM FIELD BORDERS ============
   To revert: delete from this comment down through the matching END comment. */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not(#searchBtn):not(#signInBtn),
html.dark select,
html.dark textarea {
    background-color: #2d2638 !important;
    border: 1px solid rgba(212, 165, 116, 0.18) !important;
    color: #f5f1ea !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"])::placeholder,
html.dark textarea::placeholder {
    color: #a89db0 !important;
}

html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: rgba(212, 165, 116, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.12) !important;
    outline: none !important;
}

/* ============ STEP 3 END ============ */

/* ============ STEP 4: HEADING TYPOGRAPHY REFINEMENT ============
   To revert: delete from this comment down through the matching END comment. */
html.dark h1,
html.dark h2,
html.dark h3 {
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}

/* Hero-scale headings get even lighter for editorial feel */
html.dark .text-3xl,
html.dark .text-4xl,
html.dark .text-5xl {
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
}

/* ============ STEP 4 END ============ */

/* ============ STEP 5: SURGICAL ROSE GOLD ACCENTS ============
   To revert: delete from this comment down through the matching END comment.
   Strategy: rose gold replaces purple ONLY on secondary/informational elements.
   Purple is preserved for: brand logo, primary CTAs (Search, Sign In, Schedule),
   active category chips, avatar fallback, Pro Plan badge gradient. */

/* Secondary informational links and small accents */
html.dark .text-purple-400:not(button):not(a.font-semibold) {
    color: #d4a574 !important;
}

html.dark .hover\:text-purple-300:hover {
    color: #e4bc8f !important;
}

/* "How are search results ranked?" expandable info */
html.dark #howRankedToggle,
html.dark #howRankedToggle svg {
    color: #d4a574 !important;
}

/* "Products: Aveda" type secondary text-purple-300 links */
html.dark .text-purple-300:not(button):not(a.font-semibold) {
    color: #d4a574 !important;
}

/* Tier badges (BUSINESS / PRO / Business Plan / Pro Plan) — premium signal */
html.dark .bg-purple-500\/20,
html.dark .bg-purple-500\/10,
html.dark .bg-purple-600\/20 {
    background-color: rgba(212, 165, 116, 0.15) !important;
}

html.dark .border-purple-500\/30,
html.dark .border-purple-500\/40,
html.dark .border-purple-400\/30 {
    border-color: rgba(212, 165, 116, 0.3) !important;
}

html.dark .text-purple-300.bg-purple-500\/20,
html.dark span.text-purple-300 {
    color: #e4bc8f !important;
}

/* Section dividers and subtle borders shift to warm rose-gold tint */
html.dark .border-slate-700,
html.dark .border-slate-700\/50,
html.dark .border-slate-600 {
    border-color: rgba(212, 165, 116, 0.12) !important;
}

/* Pro Plan / Business Plan badge gradient (premium tier signal), and the small
   round avatars, which share the treatment.
   
   RETARGETED WITH THE GRADIENT SWAP. This selected
   `.from-purple-500.to-indigo-500.rounded-full`, and those classes are gone -
   69 occurrences became `cl-gradient`. Left alone the selector would have
   matched nothing and ten elements would have reverted from champagne to
   violet in dark mode: a silent regression, and exactly the coupling to
   Tailwind's class names that the swap was done to remove.
   
   The second selector still names Tailwind classes and still matches four
   elements using `from-purple-500` with a different `to-`. Those were never
   part of the primary-CTA gradient and are left as they are. */
html.dark .cl-gradient.rounded-full:not(button):not(.gradient-button),
html.dark span.bg-gradient-to-r.from-purple-500 {
    background: linear-gradient(135deg, #d4a574 0%, #c9956a 100%) !important;
    color: #1a1625 !important;
}

/* BUSINESS tier badge on search result cards (uses indigo variants) */
html.dark span.bg-indigo-500\/15 {
    background-color: rgba(212, 165, 116, 0.15) !important;
    border-color: rgba(212, 165, 116, 0.3) !important;
    color: #e4bc8f !important;
}

html.dark .text-indigo-300.bg-indigo-500\/15 {
    color: #e4bc8f !important;
}

/* Other indigo borders and links that aren't role-coded buttons */
html.dark .border-indigo-500\/30,
html.dark .border-indigo-500\/40 {
    border-color: rgba(212, 165, 116, 0.3) !important;
}

/* Secondary indigo text (e.g., "Find Talent" subtext, address indigo links) */
html.dark .text-indigo-300:not(button):not(a.font-semibold):not(#selectSalonBtn *) {
    color: #d4a574 !important;
}

/* ============ STEP 5 END ============ */

/* ============ STEP 6: SOFTER CORNER RADII ============
   To revert: delete from this comment down through the matching END comment. */
html.dark .rounded-lg {
    border-radius: 0.875rem !important; /* 14px, up from 8px */
}

html.dark .rounded-xl {
    border-radius: 1.125rem !important; /* 18px, up from 12px */
}

html.dark .rounded-2xl {
    border-radius: 1.5rem !important; /* 24px, up from 16px */
}

/* ============ STEP 6 END ============ */

/* ============ STEP 7: DEEPER, SOFTER SHADOWS ============
   To revert: delete from this comment down through the matching END comment. */
html.dark .shadow-lg {
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.4), 0 4px 8px -4px rgba(0, 0, 0, 0.2) !important;
}

html.dark .shadow-xl {
    box-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.45), 0 6px 12px -6px rgba(0, 0, 0, 0.25) !important;
}

html.dark .shadow-2xl {
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.5), 0 8px 16px -8px rgba(0, 0, 0, 0.3) !important;
}

/* ============ STEP 7 END ============ */

/* ============ HERO PANEL: WARM RADIAL GLOW + TOP BORDER ============
   Adds subtle warm ambient light at top-center of search panel,
   plus a thin rose-gold top border as an editorial "opening flourish."
   To revert: delete this block. */
html.dark #search {
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212, 165, 116, 0.07) 0%, transparent 70%), #252033 !important;
    border-top: 1px solid rgba(212, 165, 116, 0.25) !important;
}

/* Search + header Sign In — dark mode's own continuous shimmer.
   This is a RESTORATION, not a new treatment: the five-stop violet below is
   verbatim the gradient these two buttons carried before the light-mode
   rebuild. The rule that held it lived unscoped in 01-light-mode.css, so
   tokenising that sheet to brass mapped all five stops to --cl-accent and
   dark mode inherited a flat brass button by ID specificity. The stops are
   five and distinct on purpose: background-size:200% slides the *variation*
   between them, so a single repeated colour animates to nothing. */
/* ---------------------------------------------------------------------------
   STOPS DARKENED 2026-09-13 -- HANDOFF section 7 item 52. WCAG 1.4.3.

   THE DEFECT THIS FIXES IS A SHADOWING BUG, NOT A COLOUR MISTAKE. Item 33
   darkened dark's primary to #7C4DD6 -> #5A4FD6 through html.dark .cl-gradient.
   Both of these buttons carry cl-gradient -- and the rule below is an ID
   selector, so it outranks the class rule and the two buttons kept the old
   violet while every other primary moved. Item 33's OTHER half did land, because
   the border sits on html.dark button.cl-gradient, a different selector: the
   result was a correct 1.4.11 boundary wrapped around a failing 1.4.3 label.

   Measured, white label, every stop -- item 33's own lesson that a gradient has
   no single ratio:

       before                      after
       #7c3aed  5.70  ok           #5A3BA8  8.00
       #a855f7  3.96  FAIL         #8257D8  4.88
       #6366f1  4.47  FAIL         #5A4FD6  5.96
       #a855f7  3.96  FAIL         #8257D8  4.88
       #7c3aed  5.70  ok           #5A3BA8  8.00

   THE SWING IS PRESERVED DELIBERATELY, and it is why the ends moved rather than
   the middle. The comment below is right that five near-identical stops animate
   to nothing. Original luminance spread 0.0811; this set is 0.0839. The obvious
   alternative -- reusing item 33's #7C4DD6/#5A4FD6 unchanged as the middle stops
   -- clears 4.5 at 5.40 but collapses the spread to 0.0183, which passes the
   contrast check by killing the effect the rule exists for.

   #5A4FD6 is item 33's own indigo stop and #8257D8 sits in the same darkened
   violet family, so dark still has ONE primary purple rather than two.
   --------------------------------------------------------------------------- */
html.dark #searchBtn,
html.dark #signInBtn {
    background: linear-gradient(135deg, #5A3BA8 0%, #8257D8 35%, #5A4FD6 50%, #8257D8 65%, #5A3BA8 100%);
    background-size: 200% auto;
    animation: cl-shimmer-move 3s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    html.dark #searchBtn,
    html.dark #signInBtn { animation: none; }
}

/* ==================================================================
   Dark's own treatment for the four families that had been leaking.

   Every value below is the VERBATIM pre-rebuild colour, recovered from
   f4ae9ea~1. These rules were never dark-specific in the first place:
   they sat unscoped in the light sheet, so dark inherited them, and
   while the palette was violet that looked correct. Re-tokenising the
   light sheet to brass turned an invisible leak into a visible one.
   The geometry stays unscoped in 01-light-mode.css -- both themes draw
   the same shapes; only the colour differs.
   ================================================================== */

html.dark #results .cl-profile-card::before,
html.dark .bg-slate-800.rounded-2xl.shadow-2xl::before,
html.dark .cl-accent-top::before {
    background: linear-gradient(90deg, transparent, #a855f7, #6366f1, transparent);
}

html.dark #results .cl-profile-card:hover {
    border-color: rgba(168, 85, 247, 0.7);
    box-shadow: 0 12px 40px rgba(168, 85, 247, 0.25);
}
html.dark .favorite-btn {
    color: #9ca3af;
}

html.dark .favorite-btn:hover {
    background-color: rgba(139, 92, 246, 0.1);
    color: #a78bfa;
}

html.dark button.favorite-btn.favorited {
    color: #fbbf24 !important;
}