/* T190 §B5 — Clear skin of the customer subpages of an organization whose widget
   appearance is Clear, plus (fix_opus2) the storefront canvas around the Clear widget.
   Token-level only: every rule is scoped to a marker that the server renders for Clear
   (`data-clear-storefront="v1"` on subpages, `data-clear-canvas="v1"` on the booking page),
   so a Classic organization (no marker) is unchanged. Static file under public/ linked only
   for Clear (fix_opus2 A2), never bundled into a Classic route.
   The --clear-* names and values are identical to src/styles/clear-widget-tokens.css
   (pinned by widget-appearance.test.ts).
   Theme (fix_opus2 AC-T1, same rule as clearPublicTheme): `data-clear-theme` (set after
   hydration) wins; before it, a saved theme (`html[data-clear-saved-theme]`, pre-paint)
   wins; otherwise prefers-color-scheme. */
:is([data-clear-storefront="v1"], [data-clear-canvas="v1"]) {
  --clear-bg: #F5F6FA; --clear-surface: #FFFFFF; --clear-ink: #172033; --clear-muted: #536176; --clear-line: #E1E6ED; --clear-edge: #7B8798;
  --clear-accent: var(--clear-scheme-light, #5946D2); --clear-on-accent: #FFFFFF;
  --clear-warn: #9A4A00; --clear-warn-bg: #FFF1D6; --clear-error: #B42332; --clear-error-bg: #FDEBEC;
  --clear-cat-1: #EEF1F5; --clear-success: #166534;
  --clear-control-radius: 8px; --clear-card-radius: 12px; --clear-panel-radius: 16px;
}
/* Classic design-system tokens re-pointed to Clear inside the Clear subtree only. (0,2,0) + !important:
   fix_opus2 AC-T2 — outranks the `.storefront-theme` !important dark palette of globals.css (system dark),
   the light `.bk-skin` island and an inline owner palette, so canvas, cards and text never mix themes. */
:is([data-clear-storefront="v1"], [data-clear-canvas="v1"])[data-clear-scheme] {
  --bg: var(--clear-bg) !important; --bg-2: var(--clear-cat-1) !important; --fg: var(--clear-ink) !important; --muted: var(--clear-muted) !important;
  --card: var(--clear-surface) !important; --card-2: var(--clear-surface) !important; --card-solid: var(--clear-surface) !important;
  --border: var(--clear-line) !important; --border-strong: var(--clear-edge) !important;
  --accent: var(--clear-accent) !important; --accent-solid: var(--clear-accent) !important; --accent-fg: var(--clear-on-accent) !important;
  --accent-2: var(--clear-accent) !important; --accent-3: var(--clear-accent) !important; --grad: var(--clear-accent) !important;
  --surface: var(--clear-surface) !important; --surface-2: var(--clear-cat-1) !important;
  --danger: var(--clear-error) !important; --warning: var(--clear-warn) !important;
  color: var(--clear-ink);
  color-scheme: light !important;
}
[data-clear-storefront="v1"] {
  --radius: var(--clear-card-radius); --radius-sm: var(--clear-control-radius);
  --shadow: none; --glow: none; --blur: 0px;
}
/* T190 fix_opus3 (Opus gate v3 P1-1): the theme tokens of the public pages that are keyed on `html[data-theme]`
   (ui-tokens.css --ui-*, the review --rating-accent of globals.css) follow the Clear theme of this root, not the
   document theme: they are --clear-* values, which already switch by the three Clear conditions above.
   Inventory of the --ui-* used by the customer subpages: cal-v2-screens/t190/fix-opus3/ui-token-inventory.txt
   (theme-independent ones — on-accent, on-dark, accent-glow, print-*, danger-solid ≈ equal — stay). (0,2,0) + !important
   like the Classic re-pointing above (the review page sets `.rating-scope` on this same root).
   T190 fix_opus4 (Opus gate v4 P1-1): --success (globals.css #22c55e dark / #14783a light) is a theme token too
   (claimed waitlist offer, password strength dots, "rescheduled" notice): --clear-success, AA text on every Clear
   surface — #166534 light ≥ 6.29:1 (white 7.13, bg 6.60, cat-1 6.29), #4ade80 dark ≥ 7.30:1 (surface 9.28, cat-1 7.30).
   Static guard of every theme token the subpages use: src/app/[org]/clear-theme-token-guard.test.ts. */
[data-clear-storefront="v1"][data-clear-scheme] {
  --ui-surface: var(--clear-surface) !important;
  --ui-confirmed-bg: var(--clear-cat-1) !important; --ui-pending-bg: var(--clear-warn-bg) !important; --ui-done-bg: var(--clear-bg) !important;
  --ui-paid-bg: var(--clear-surface) !important; --ui-paid: var(--clear-accent) !important; --ui-focus: var(--clear-accent) !important;
  --rating-accent: var(--clear-accent) !important; --success: var(--clear-success) !important;
}
:is([data-clear-storefront="v1"], [data-clear-canvas="v1"])[data-clear-theme="dark"],
html[data-clear-saved-theme="dark"] :is([data-clear-storefront="v1"], [data-clear-canvas="v1"]):not([data-clear-theme="light"]) {
  --clear-bg: #101722; --clear-surface: #182130; --clear-ink: #EDF2F7; --clear-muted: #ACB8C9; --clear-line: #334155; --clear-edge: #8290A5;
  --clear-accent: var(--clear-scheme-dark, #B5AAFF); --clear-on-accent: #111827;
  --clear-warn: #F8CA77; --clear-warn-bg: #382B16; --clear-error: #FDA4AF; --clear-error-bg: #391E28;
  --clear-cat-1: #293344; --clear-success: #4ade80;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="dark"]:not([data-clear-saved-theme]) :is([data-clear-storefront="v1"], [data-clear-canvas="v1"]):not([data-clear-theme="light"]) {
  --clear-bg: #101722; --clear-surface: #182130; --clear-ink: #EDF2F7; --clear-muted: #ACB8C9; --clear-line: #334155; --clear-edge: #8290A5;
  --clear-accent: var(--clear-scheme-dark, #B5AAFF); --clear-on-accent: #111827;
  --clear-warn: #F8CA77; --clear-warn-bg: #382B16; --clear-error: #FDA4AF; --clear-error-bg: #391E28;
  --clear-cat-1: #293344; --clear-success: #4ade80;
  }
}
/* color-scheme follows the same rule (native controls, scrollbars). */
:is([data-clear-storefront="v1"], [data-clear-canvas="v1"])[data-clear-theme="dark"], html[data-clear-saved-theme="dark"] :is([data-clear-storefront="v1"], [data-clear-canvas="v1"]):not([data-clear-theme="light"]) { color-scheme: dark !important; }
@media (prefers-color-scheme: dark) { html[data-theme="dark"]:not([data-clear-saved-theme]) :is([data-clear-storefront="v1"], [data-clear-canvas="v1"]):not([data-clear-theme="light"]) { color-scheme: dark !important; } }
:is([data-clear-storefront="v1"], [data-clear-canvas="v1"])[data-clear-scheme=noir] { --clear-scheme-light: #80601A; --clear-scheme-dark: #D4A640; }
:is([data-clear-storefront="v1"], [data-clear-canvas="v1"])[data-clear-scheme=polnoc] { --clear-scheme-light: #2458B8; --clear-scheme-dark: #8CB1FF; }
:is([data-clear-storefront="v1"], [data-clear-canvas="v1"])[data-clear-scheme=ruza] { --clear-scheme-light: #B12D67; --clear-scheme-dark: #F39ABD; }
:is([data-clear-storefront="v1"], [data-clear-canvas="v1"])[data-clear-scheme=ocean] { --clear-scheme-light: #0E7490; --clear-scheme-dark: #67D5EC; }
:is([data-clear-storefront="v1"], [data-clear-canvas="v1"])[data-clear-scheme=les] { --clear-scheme-light: #2F6B3A; --clear-scheme-dark: #91D3A0; }
:is([data-clear-storefront="v1"], [data-clear-canvas="v1"])[data-clear-scheme=piesok] { --clear-scheme-light: #945520; --clear-scheme-dark: #E3B47D; }
:is([data-clear-storefront="v1"], [data-clear-canvas="v1"])[data-clear-scheme=levandula] { --clear-scheme-light: #5946D2; --clear-scheme-dark: #B5AAFF; }
:is([data-clear-storefront="v1"], [data-clear-canvas="v1"])[data-clear-scheme=zapad] { --clear-scheme-light: #B83D20; --clear-scheme-dark: #FFA88B; }
:is([data-clear-storefront="v1"], [data-clear-canvas="v1"])[data-clear-scheme=mono] { --clear-scheme-light: #292929; --clear-scheme-dark: #E5E7EB; }

/* Full-page Clear canvas instead of the Classic mesh. The page root can be a containing
   block (container queries), so the canvas is keyed on the marker via :has(). Values are
   --clear-bg light/dark.
   T190 fix_opus1 P2-1: `:root[data-theme]` (0,3,1) outranks the light mesh `:root[data-theme="light"] body` (0,2,1) of globals.css. */
html:has(:is([data-clear-storefront="v1"], [data-clear-canvas="v1"])), html:has(:is([data-clear-storefront="v1"], [data-clear-canvas="v1"])) body,
:root[data-theme]:has(:is([data-clear-storefront="v1"], [data-clear-canvas="v1"])), :root[data-theme]:has(:is([data-clear-storefront="v1"], [data-clear-canvas="v1"])) body { background: #F5F6FA; background-image: none; }
/* fix_opus2 AC-T2: the canvas takes the theme of its Clear root (same three conditions as the tokens). */
:root[data-theme]:has(:is([data-clear-storefront="v1"], [data-clear-canvas="v1"])[data-clear-theme="dark"]), :root[data-theme]:has(:is([data-clear-storefront="v1"], [data-clear-canvas="v1"])[data-clear-theme="dark"]) body,
:root[data-theme][data-clear-saved-theme="dark"]:has(:is([data-clear-storefront="v1"], [data-clear-canvas="v1"]):not([data-clear-theme="light"])), :root[data-theme][data-clear-saved-theme="dark"]:has(:is([data-clear-storefront="v1"], [data-clear-canvas="v1"]):not([data-clear-theme="light"])) body { background: #101722; background-image: none; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="dark"]:not([data-clear-saved-theme]):has(:is([data-clear-storefront="v1"], [data-clear-canvas="v1"]):not([data-clear-theme="light"])), :root[data-theme="dark"]:not([data-clear-saved-theme]):has(:is([data-clear-storefront="v1"], [data-clear-canvas="v1"]):not([data-clear-theme="light"])) body { background: #101722; background-image: none; }
}
[data-clear-storefront="v1"] { background: var(--clear-bg); }
[data-clear-storefront="v1"].clear-storefront-contents { display: contents; }
/* fix_opus2: the booking page canvas around the Clear widget. Its Classic page layers (owner palette layer,
   light island layer) take the Clear canvas colour; the light island's fixed cream notice takes the Clear warn tone. */
[data-clear-canvas="v1"][data-clear-scheme] > :is(.storefront-theme-bg, .bk-skin-bg) { background: var(--clear-bg) !important; }
.booking-flow.bk-skin[data-clear-canvas="v1"][data-clear-scheme] .card[role="note"] { background: var(--clear-warn-bg); }

[data-clear-storefront="v1"] :is(.card, .account-shell-hero) { background: var(--clear-surface); border: 1px solid var(--clear-line); border-radius: var(--clear-card-radius); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-clear-storefront="v1"] :is(h1, h2, h3) { color: var(--clear-ink); background: none; -webkit-text-fill-color: currentColor; }
[data-clear-storefront="v1"] :is(.muted, small) { color: var(--clear-muted); }
[data-clear-storefront="v1"] a { color: var(--clear-accent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
[data-clear-storefront="v1"] :is(button, .btn-primary, .btn-ghost, .bk-action, input, select, textarea) { border-radius: var(--clear-control-radius); }
[data-clear-storefront="v1"] :is(button, .btn-ghost, .bk-action) { background: var(--clear-surface); border: 1px solid var(--clear-edge); color: var(--clear-ink); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; text-decoration: none; }
[data-clear-storefront="v1"] :is(button[type="submit"], .btn-primary) { background: var(--clear-accent); border-color: var(--clear-accent); color: var(--clear-on-accent); background-image: none; }
[data-clear-storefront="v1"] :is(button, .btn-primary, .btn-ghost, .bk-action, a.badge, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) { min-height: 44px; }
[data-clear-storefront="v1"] :is(input, select, textarea) { background: var(--clear-surface); border: 1px solid var(--clear-edge); color: var(--clear-ink); }
[data-clear-storefront="v1"] :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--clear-accent); outline-offset: 2px; box-shadow: none; }
/* T190 fix_opus1 P1-1: the chosen chip / pill / pressed toggle is a full accent fill (≥ 3:1 against the
   unchosen surface, --clear-on-accent text ≥ 4.5:1 in all nine schemes). (0,3,0) outranks the control rule above. */
[data-clear-storefront="v1"] :is(button, .btn-ghost, .bk-action, .bk-cat-pill):is([aria-checked="true"], [aria-pressed="true"], .sel) { background: var(--clear-accent); border-color: var(--clear-accent); color: var(--clear-on-accent); box-shadow: none; font-weight: 700; }
/* T190 fix_opus1 P2-2: a badge is a label (pill, tonal fill, no field edge). A badge link (back link, schedule
   filter) is a pill control with the control edge and accent text; an inline active-filter border still wins. */
[data-clear-storefront="v1"] .badge { display: inline-flex; align-items: center; max-width: 100%; border: 1px solid transparent; border-radius: 999px; background: var(--clear-cat-1); color: var(--clear-ink); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-clear-storefront="v1"] .gift-card .badge { align-self: flex-start; }
[data-clear-storefront="v1"] a.badge { border-color: var(--clear-edge); background: var(--clear-surface); color: var(--clear-accent); font-weight: 600; text-decoration: none; }
[data-clear-storefront="v1"] :is(p, li, dd, td, label, span, strong) { min-width: 0; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  [data-clear-storefront="v1"] * { transition: none !important; animation: none !important; }
}