/* Theme layer, loaded on every page after the page's own stylesheets and its generated *.dark.css.
   - the native-feel baseline for touch devices (the last section: tap highlight, press feedback, input zoom)
   - the theme switch button
   - the dark values of the design tokens (app.css, legal.css, client-home.css define the light ones)
   - dark exceptions the generated rules cannot express (inline page styles, third-party widgets, white-on-purpose parts)
   The dark theme applies only under :root[data-theme="dark"], which theme.js sets from the saved choice or the system. */

/* ── Switch button ───────────────────────────────────────────────────────── */
.theme-toggle {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover {
    background: rgba(20, 145, 138, 0.14);
  }
}
.theme-toggle:focus-visible { outline: 2px solid var(--brand, #0f766e); outline-offset: 2px; }
[data-theme-toggle] .icon-sun { display: none; }
:root[data-theme="dark"] [data-theme-toggle] .icon-moon { display: none; }
:root[data-theme="dark"] [data-theme-toggle] .icon-sun { display: inline; }
/* Narrow screens: the switch lives in the account menu instead of the crowded top bar. */
@media (max-width: 640px) {
  .topnav-actions .theme-toggle { display: none; }
}
.top-links .theme-toggle { color: var(--ink-body, #59625c); }

.language-toggle {
  display: inline-grid;
  flex: none;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  border: 1px solid var(--line, #e5e9e5);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 800 0.72rem/1 Inter, system-ui, sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .language-toggle:hover {
    background: rgba(20, 145, 138, .14);
  }
}
.language-toggle:focus-visible { outline: 2px solid var(--brand, #0f766e); outline-offset: 2px; }

/* ── Dark tokens ─────────────────────────────────────────────────────────── */
/* Modern Champagne & Graphite, dark values. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --field-border: #717b7a;
  --gold-icon: #f1d18a;
  --home-rating: #f1d18a;

  --brand: #e8c778;
  --brand-600: #e8c778;
  --brand-700: #f0cf84;
  --brand-pressed: #f0cf84;
  --brand-dark: #e8c778;
  --brand-soft: #342f23;
  --on-brand: #23251f;
  --provider: #f0cf84;
  --selected: #342f23;
  --gold: #f1d18a;
  --gold-ink: #f0cf84;
  --gold-bg: #342f23;
  --maya-teal: #f1d18a;
  --maya-ocean: #f0cf84;
  --maya-soft: #342f23;
  --on-maya: #23251f;
  --danger: #f2a2a2;
  --danger-600: #f2a2a2;
  --danger-bg: rgba(242, 162, 162, 0.14);
  --warning: #eec47c;
  --warning-600: #eec47c;
  --warning-bg: rgba(238, 196, 124, 0.14);
  --success: #92d1aa;
  --success-600: #92d1aa;
  --success-bg: rgba(146, 209, 170, 0.14);
  --info: #bfc6c2;
  --info-bg: #2b2f30;

  /* app.css */
  --ink: #f6f6f2;
  --ink-strong: #f6f6f2;
  --ink-body: #bfc6c2;
  --ink-subtle: #a4aca7;
  --muted: #bfc6c2;
  --bg-app: #141617;
  --surface: #202324;
  --surface-soft: #2b2f30;
  --surface-tint: #342f23;
  --card: #202324;
  --soft: #2b2f30;
  --border-soft: #3c4242;
  --line: #3c4242;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.24);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.24);
  --shadow-float: 0 4px 8px rgba(0, 0, 0, 0.32), 0 20px 48px rgba(0, 0, 0, 0.36);

  /* legal.css */
  --bg: #141617;
  --border: #3c4242;
  --brand-light: #342f23;

  background: #141617;
  color: #bfc6c2;
}

/* --brand-dark is a fill on legal buttons (hover) and text on links; the links get a lighter twin from the generator. */

/* ── Legal pages ─────────────────────────────────────────────────────────── */
:root[data-theme="dark"] .skip-link { background: #202324; color: #f0cf84; }
:root[data-theme="dark"] .site-header { background: rgba(32, 35, 36, 0.94); }

/* ── Landing page (its inline styles and compiled Tailwind) ──────────────── */
:root[data-theme="dark"] body.bg-white { background-color: #141617; }
:root[data-theme="dark"] section.bg-brand { background-color: #202324; }
:root[data-theme="dark"] a.bg-brand,
:root[data-theme="dark"] button.bg-brand,
:root[data-theme="dark"] span.bg-brand,
:root[data-theme="dark"] .bg-brand-600 { background-color: rgb(232 199 120 / var(--tw-bg-opacity, 1)); }
:root[data-theme="dark"] .bg-brand-600.text-white { color: #23251f; }
@media (hover: hover) and (pointer: fine) {
  :root[data-theme="dark"] .hover\:bg-brand-700:hover {
    background-color: #f0cf84;
  }
}
:root[data-theme="dark"] .nav-link { color: #bfc6c2; }
:root[data-theme="dark"] .nav-link.active { color: #f6f6f2; }
@media (hover: hover) and (pointer: fine) {
  :root[data-theme="dark"] .nav-link:hover {
    color: #f6f6f2;
  }
}
:root[data-theme="dark"] .phone-screen {
  background: linear-gradient(180deg, #2b2f30 0%, #141617 100%);
}
:root[data-theme="dark"] .gradient-text { background: none; color: #f6f6f2; }
:root[data-theme="dark"] .maya-gradient { background-image: linear-gradient(135deg, #f1d18a 0%, #f0cf84 100%); }

/* ── Third-party and on-purpose exceptions ───────────────────────────────── */
/* Sign in with Apple: the white button on dark surfaces (Apple's guidelines). */
:root[data-theme="dark"] .apple-signin-button { background: #fff; border-color: #fff; color: #000; }
@media (hover: hover) and (pointer: fine) {
  :root[data-theme="dark"] .apple-signin-button:hover:not(:disabled) {
    background: #e5e9e5;
  }
}
:root[data-theme="dark"] .apple-signin-button:focus-visible { outline-color: #f0cf84; }
/* Form controls: native widgets (date pickers, selects, autofill) follow color-scheme; placeholders need contrast. */
:root[data-theme="dark"] ::placeholder { color: #a4aca7; opacity: 1; }
:root[data-theme="dark"] input:-webkit-autofill,
:root[data-theme="dark"] textarea:-webkit-autofill,
:root[data-theme="dark"] select:-webkit-autofill {
  -webkit-text-fill-color: #f6f6f2;
  box-shadow: 0 0 0 1000px #2b2f30 inset;
  caret-color: #f6f6f2;
}
:root[data-theme="dark"] ::selection { background: rgba(240, 207, 132, 0.35); color: #f6f6f2; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); }
@media (hover: hover) and (pointer: fine) {
  :root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
  }
}

/* ── Chats ───────────────────────────────────────────────────────────────── */
/* In the light theme the wallpaper sits below the bars; keep that order in the dark one. */
:root[data-theme="dark"] .messages-fullscreen {
  --chat-wallpaper: #141617;
  --chat-bar: #202324;
  --chat-in: #2b2f30;
  --chat-out: #342f23;
  --chat-active: #342f23;
  --chat-hover: #2b2f30;
  --chat-line: #3c4242;
  --chat-ink: #f6f6f2;
  --chat-muted: #a4aca7;
  --chat-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  background: #141617;
}
:root[data-theme="dark"] body[data-app-role="artist"] .messages-fullscreen {
  --chat-out: #342f23;
  --chat-active: #342f23;
}
:root[data-theme="dark"] .messages-fullscreen .messages .message small { color: rgba(246, 246, 242, 0.58); }
:root[data-theme="dark"] .messages-fullscreen .maya-chat-thread {
  background-image: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1.3px);
}

/* ── Provider cards ─────────────────────────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] .ch-card-media {
  background: linear-gradient(135deg, #342f23 0%, #2b2f30 100%);
}
:root[data-theme="dark"] .ch-card-initials { color: #f0cf84; }

/* The toast fill is near-white in the dark theme, so its error text is the light theme's error red. */
:root[data-theme="dark"] .toast.error { color: #b43f3f; }

/* Ink on Champagne Gold remains Olive Charcoal in both appearances. */
:root[data-theme="dark"] .text-on-brand { color: #23251f; }

/* Large graphite feature panels stay charcoal in dark mode; gold is reserved for actions and small accents. */
:root[data-theme="dark"] .journey-card,
:root[data-theme="dark"] .booking-card,
:root[data-theme="dark"] .smart-summary,
:root[data-theme="dark"] .auth-reset-side {
  background: #202324;
  border-color: #3c4242;
  color: #f6f6f2;
}
:root[data-theme="dark"] .journey-card ol,
:root[data-theme="dark"] .booking-card p,
:root[data-theme="dark"] .smart-summary dt,
:root[data-theme="dark"] .auth-kicker { color: #bfc6c2; }

/* Components whose light text sat on graphite need dark ink when their fill becomes champagne. */
:root[data-theme="dark"] .sx-avatar,
:root[data-theme="dark"] .pp-avatar,
:root[data-theme="dark"] .pp-avatar-edit,
:root[data-theme="dark"] .pp-checks li.done .pp-check-mark,
:root[data-theme="dark"] .po-steps li.done .po-step-mark { color: #23251f; }
:root[data-theme="dark"] .pp-avatar-edit { background: #e8c778; }
:root[data-theme="dark"] .rv-star { color: #3c4242; }

/* Client-home tokens are scoped outside :root, so pin their action values explicitly. */
:root[data-theme="dark"] body[data-app-role="client"] {
  --home-primary: #e8c778;
  --home-primary-hover: #f0cf84;
  --home-primary-soft: #342f23;
}
:root[data-theme="dark"] .market-home .home-primary { color: #23251f; }

/* ── Native feel on phones ───────────────────────────────────────────────────────────────────────────────────────
   Hover styles live inside @media (hover: hover) and (pointer: fine) in every stylesheet, so a tap never leaves one stuck.
   This block removes the other tells of "a website in a browser". Press feedback uses the individual `scale` property so
   it composes with any transform a control already has (a centred floating button keeps its translate). */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }

html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

/* viewport-fit=cover lets the page run under the notch in landscape; keep the content out of it. */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* Taps fire at once (no double-tap-zoom wait) and a long press on a control does not select its label. Text content stays selectable. */
button, a, summary, label, select, [role="button"], input[type="checkbox"], input[type="radio"] {
  touch-action: manipulation;
}
button, [role="button"] {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Pressing a control answers on touch-down, on every input type; 100-160ms, ease-out. */
button { transition: scale 120ms var(--ease-out); }
button:not(:disabled):active,
[role="button"]:not([aria-disabled="true"]):active,
.button:active, .ghost:active, .danger-button:active {
  scale: 0.97;
}

/* iOS Safari zooms the page when a text field under 16px takes focus and never zooms back out. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Touch targets: on a finger-driven screen a control is at least 44px each way (Apple HIG; WCAG 2.5.8 asks for 24).
   Only the controls that are drawn smaller are listed; they grow by a few pixels and nothing else moves. */
@media (pointer: coarse) {
  .top-nav-link, .top-icon, .profile-button, .menu-section a, .menu-section button, .menu-link,
  .button, .ghost, .px-btn, .px-chip, .opportunity-actions .button, .opportunity-actions .ghost,
  .maya-history-menu, .ph-action-icon, .save-chip, .px-fav, .composer-icon-button, .chat-icon-btn,
  .chat-clear-btn, .chat-options-close, .qs-remove, .maya-history-head .icon-button,
  .messages-fullscreen .chat-composer .composer-attach {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── Browser surfaces ────────────────────────────────────────────────────────────────────────────────────────────
   The parts nobody draws still carry the design: selection, caret, form accents, scrollbars, link underlines, and how
   headings and paragraphs break across lines. */
::selection { background: #e6f3f1; color: #202522; }
:root[data-theme="dark"] ::selection { background: #342f23; color: #f6f6f2; }
input, textarea { caret-color: var(--brand, #0f766e); }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--brand, #0f766e); }
html { scrollbar-color: rgba(15, 118, 110, 0.35) transparent; scrollbar-width: thin; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
a:not([class]) { text-underline-offset: 0.18em; text-decoration-thickness: from-font; }