/**
 * Customer site themes — contract v2
 * Remaps shared tokens for body[data-uc-theme]. Signup is out of scope
 * (member apply path never sets the attribute on signup pages).
 *
 * Every theme must define the full required role set: 4 semantic quads
 * (base / -surface / -border / -text) and 11 structural roles. A partial
 * family is a contract violation — -text is validated against -surface
 * per theme by the contrast gate.
 */

/* Classic mirrors :root — attribute still set for uniform apply path */
body[data-uc-theme="classic"] {
  --urban-red: #b22222;
  --urban-dark-red: #8b0000;
  --urban-bg-red: #700104;
  --uc-primary: #b22222;
  --uc-primary-dark: #8b0000;
  --uc-primary-darker: #7f1d1d;
  --uc-primary-ink: #7f1d1d;
  --uc-gold: #facc15;
  --uc-gold-dim: #d4a017;
  --uc-surface: #ffffff;
  --uc-surface-soft: #f8f8f8;
  --uc-surface-muted: #f3f4f6;
  --uc-text: #111827;
  --uc-text-secondary: #4b5563;
  --uc-text-muted: #6b7280;
  --uc-border: #e5e7eb;
  --uc-border-strong: #111111;
  --uc-dna-border-strong: #111;
  --uc-dna-header-red: #b22222;
  --uc-dna-shadow-hard: 6px 6px 0 rgba(0, 0, 0, 0.32);
  --uc-dna-shadow-soft: 3px 3px 0 rgba(0, 0, 0, 0.2);
  --uc-shadow-hard: 6px 6px 0 rgba(0, 0, 0, 0.32);
  --uc-shadow-soft: 3px 3px 0 rgba(0, 0, 0, 0.2);

  --uc-danger: #ef4444;
  --uc-danger-surface: #fef2f2;
  --uc-danger-border: #fecaca;
  --uc-danger-text: #991b1b;
  --uc-success: #22c55e;
  --uc-success-surface: #ecfdf5;
  --uc-success-border: #bbf7d0;
  --uc-success-text: #166534;
  --uc-warning: #f59e0b;
  --uc-warning-surface: #fffbeb;
  --uc-warning-border: #fde68a;
  --uc-warning-text: #92400e;
  --uc-info: #3b82f6;
  --uc-info-surface: #eff6ff;
  --uc-info-border: #bfdbfe;
  --uc-info-text: #1d4ed8;

  --uc-surface-raised: #ffffff;
  --uc-surface-sunken: #f3f4f6;
  --uc-surface-input: #ffffff;
  --uc-divider: #e5e7eb;
  --uc-scrim: rgba(0, 0, 0, 0.35);
  --uc-scrim-weak: rgba(0, 0, 0, 0.08);
  --uc-scrim-soft: rgba(0, 0, 0, 0.18);
  --uc-scrim-strong: rgba(0, 0, 0, 0.55);
  --uc-wash-weak: rgba(15, 23, 42, 0.06);
  --uc-wash-soft: rgba(15, 23, 42, 0.1);
  --uc-wash-strong: rgba(15, 23, 42, 0.18);
  --uc-veil-weak: rgba(255, 255, 255, 0.08);
  --uc-veil-soft: rgba(255, 255, 255, 0.14);
  --uc-veil-strong: rgba(255, 255, 255, 0.22);
  --uc-primary-wash: rgba(178, 34, 34, 0.08);
  --uc-primary-wash-strong: rgba(178, 34, 34, 0.2);
  --uc-accent-wash: rgba(250, 204, 21, 0.2);
  --uc-accent-wash-strong: rgba(250, 204, 21, 0.4);
  --uc-shadow-ink-weak: rgba(0, 0, 0, 0.06);
  --uc-shadow-ink-soft: rgba(0, 0, 0, 0.12);
  --uc-shadow-ink-strong: rgba(0, 0, 0, 0.25);
  --uc-focus-ring: #b22222;
  --uc-state-hover: rgba(17, 24, 39, 0.04);
  --uc-state-active: rgba(17, 24, 39, 0.08);
  --uc-state-disabled: #9ca3af;
  --uc-text-on-gold: #111111;
  --uc-chrome: #111827;
  --uc-chrome-text: #f9fafb;
  --uc-text-on-primary: #ffffff;
  --uc-text-inverse: #ffffff;
  /* Per-member chat tones: hue comes from the handle, lightness from the theme
     so light surfaces get dark ink and dark surfaces get light ink. */
  --uc-chat-tone-sat: 70%;
  --uc-chat-tone-text-l: 30%;
  --uc-chat-tone-bg-l: 95%;
  --uc-chat-tone-border-l: 84%;
  --uc-chat-tone-accent-l: 60%;
}

body[data-uc-theme="street"] {
  --urban-red: #f2bd22;
  --urban-dark-red: #d4a017;
  --urban-bg-red: #a16207;
  --uc-primary: #f2bd22;
  --uc-primary-dark: #d4a017;
  --uc-primary-darker: #a16207;
  --uc-primary-ink: #854d0e;
  --uc-gold: #facc15;
  --uc-gold-dim: #ca8a04;
  --uc-surface: #f8f1e8;
  --uc-surface-soft: #fff8ee;
  --uc-surface-muted: #efe6da;
  --uc-text: #050505;
  --uc-text-secondary: #1f2937;
  --uc-text-muted: #6b7280;
  --uc-border: #1a1a1a;
  --uc-border-strong: #050505;
  --uc-dna-border-strong: #050505;
  --uc-dna-header-red: #f2bd22;
  --uc-dna-shadow-hard: 5px 7px 0 #050505;
  --uc-dna-shadow-soft: 3px 3px 0 #050505;
  --uc-shadow-hard: 5px 7px 0 #050505;
  --uc-shadow-soft: 3px 3px 0 #050505;

  /* Semantics warmed to sit on Street's paper surface rather than cool white. */
  --uc-danger: #b91c1c;
  --uc-danger-surface: #fdeceb;
  --uc-danger-border: #f2c0bc;
  --uc-danger-text: #8f1512;
  --uc-success: #15803d;
  --uc-success-surface: #eaf7ee;
  --uc-success-border: #b7ddc4;
  --uc-success-text: #14532d;
  --uc-warning: #b45309;
  --uc-warning-surface: #fdf4e3;
  --uc-warning-border: #eccf94;
  --uc-warning-text: #7c3a06;
  --uc-info: #1d4ed8;
  --uc-info-surface: #ebf2fd;
  --uc-info-border: #b9cdf3;
  --uc-info-text: #1e3a8a;

  --uc-surface-raised: #fff8ee;
  --uc-surface-sunken: #efe6da;
  --uc-surface-input: #fffdf8;
  /* Softer than --uc-border: Street's border is deliberate poster ink, a
     divider is not. */
  --uc-divider: #d8cdbd;
  --uc-scrim: rgba(5, 5, 5, 0.45);
  --uc-scrim-weak: rgba(5, 5, 5, 0.1);
  --uc-scrim-soft: rgba(5, 5, 5, 0.22);
  --uc-scrim-strong: rgba(5, 5, 5, 0.65);
  --uc-wash-weak: rgba(5, 5, 5, 0.06);
  --uc-wash-soft: rgba(5, 5, 5, 0.12);
  --uc-wash-strong: rgba(5, 5, 5, 0.2);
  --uc-veil-weak: rgba(255, 255, 255, 0.08);
  --uc-veil-soft: rgba(255, 255, 255, 0.14);
  --uc-veil-strong: rgba(255, 255, 255, 0.22);
  --uc-primary-wash: rgba(242, 189, 34, 0.14);
  --uc-primary-wash-strong: rgba(242, 189, 34, 0.3);
  --uc-accent-wash: rgba(250, 204, 21, 0.2);
  --uc-accent-wash-strong: rgba(250, 204, 21, 0.4);
  --uc-shadow-ink-weak: rgba(5, 5, 5, 0.08);
  --uc-shadow-ink-soft: rgba(5, 5, 5, 0.14);
  --uc-shadow-ink-strong: rgba(5, 5, 5, 0.28);
  --uc-focus-ring: #050505;
  --uc-state-hover: rgba(5, 5, 5, 0.05);
  --uc-state-active: rgba(5, 5, 5, 0.1);
  --uc-state-disabled: #8a8175;
  /* Street's primary is yellow — white here would measure 1.74:1 and fail AA. */
  --uc-text-on-gold: #050505;
  --uc-chrome: #050505;
  --uc-chrome-text: #fff8ee;
  --uc-text-on-primary: #050505;
  --uc-text-inverse: #f8f1e8;
}

body[data-uc-theme="concrete"] {
  --urban-red: #242d3c;
  --urban-dark-red: #1a222e;
  --urban-bg-red: #111827;
  --uc-primary: #242d3c;
  --uc-primary-dark: #1a222e;
  --uc-primary-darker: #111827;
  --uc-primary-ink: #1e293b;
  --uc-gold: #facc15;
  --uc-gold-dim: #d4a017;
  --uc-surface: #ffffff;
  --uc-surface-soft: #f8fafc;
  --uc-surface-muted: #f1f5f9;
  --uc-text: #0f172a;
  --uc-text-secondary: #334155;
  --uc-text-muted: #64748b;
  --uc-border: #cbd5e1;
  --uc-border-strong: #0f172a;
  --uc-dna-border-strong: #0f172a;
  --uc-dna-header-red: #242d3c;
  --uc-dna-shadow-hard: 5px 5px 0 rgba(15, 23, 42, 0.35);
  --uc-dna-shadow-soft: 2px 2px 0 rgba(15, 23, 42, 0.2);
  --uc-shadow-hard: 5px 5px 0 rgba(15, 23, 42, 0.35);
  --uc-shadow-soft: 2px 2px 0 rgba(15, 23, 42, 0.2);

  --uc-danger: #b91c1c;
  --uc-danger-surface: #fef2f2;
  --uc-danger-border: #fecaca;
  --uc-danger-text: #991b1b;
  --uc-success: #15803d;
  --uc-success-surface: #ecfdf5;
  --uc-success-border: #bbf7d0;
  --uc-success-text: #166534;
  --uc-warning: #b45309;
  --uc-warning-surface: #fffbeb;
  --uc-warning-border: #fde68a;
  --uc-warning-text: #92400e;
  --uc-info: #2563eb;
  --uc-info-surface: #eff6ff;
  --uc-info-border: #bfdbfe;
  --uc-info-text: #1d4ed8;

  --uc-surface-raised: #ffffff;
  --uc-surface-sunken: #f1f5f9;
  --uc-surface-input: #ffffff;
  --uc-divider: #e2e8f0;
  --uc-scrim: rgba(15, 23, 42, 0.45);
  --uc-scrim-weak: rgba(15, 23, 42, 0.08);
  --uc-scrim-soft: rgba(15, 23, 42, 0.2);
  --uc-scrim-strong: rgba(15, 23, 42, 0.62);
  --uc-wash-weak: rgba(15, 23, 42, 0.06);
  --uc-wash-soft: rgba(15, 23, 42, 0.1);
  --uc-wash-strong: rgba(15, 23, 42, 0.18);
  --uc-veil-weak: rgba(255, 255, 255, 0.08);
  --uc-veil-soft: rgba(255, 255, 255, 0.14);
  --uc-veil-strong: rgba(255, 255, 255, 0.22);
  --uc-primary-wash: rgba(36, 45, 60, 0.1);
  --uc-primary-wash-strong: rgba(36, 45, 60, 0.22);
  --uc-accent-wash: rgba(250, 204, 21, 0.2);
  --uc-accent-wash-strong: rgba(250, 204, 21, 0.4);
  --uc-shadow-ink-weak: rgba(15, 23, 42, 0.07);
  --uc-shadow-ink-soft: rgba(15, 23, 42, 0.13);
  --uc-shadow-ink-strong: rgba(15, 23, 42, 0.26);
  --uc-focus-ring: #242d3c;
  --uc-state-hover: rgba(15, 23, 42, 0.04);
  --uc-state-active: rgba(15, 23, 42, 0.08);
  --uc-state-disabled: #94a3b8;
  --uc-text-on-gold: #111111;
  --uc-chrome: #0f172a;
  --uc-chrome-text: #f8fafc;
  --uc-text-on-primary: #ffffff;
  --uc-text-inverse: #ffffff;
}

body[data-uc-theme="heat"] {
  --urban-red: #c91418;
  --urban-dark-red: #9a1512;
  --urban-bg-red: #700104;
  --uc-primary: #c91418;
  --uc-primary-dark: #9a1512;
  --uc-primary-darker: #700104;
  --uc-primary-ink: #fecaca;
  --uc-gold: #facc15;
  --uc-gold-dim: #d4a017;
  /*
   * Heat plates stay near-black with a cool cast — not mud brown.
   * Prior soft/muted (#1c1010 / #241616) read as sepia on rails, cards, Browse, Wire.
   * Primary still carries brand red; DNA energy stays gold rails / red chrome heads.
   */
  --uc-surface: #121010;
  --uc-surface-soft: #161413;
  --uc-surface-muted: #1a1818;
  --uc-text: #f8fafc;
  --uc-text-secondary: #e2e8f0;
  --uc-text-muted: #94a3b8;
  --uc-border: #322c2c;
  --uc-border-strong: #f8fafc;
  --uc-dna-border-strong: #f8fafc;
  --uc-dna-header-red: #c91418;
  --uc-dna-card-surface: #121010;
  --uc-dna-card-surface-soft: #1a1818;
  --uc-dna-shadow-hard: 6px 6px 0 rgba(0, 0, 0, 0.55);
  --uc-dna-shadow-soft: 3px 3px 0 rgba(0, 0, 0, 0.35);
  --uc-shadow-hard: 6px 6px 0 rgba(0, 0, 0, 0.55);
  --uc-shadow-soft: 3px 3px 0 rgba(0, 0, 0, 0.35);

  /* Bespoke dark semantics: light-mode tints are unreadable on near-black
     surfaces, so each family is authored rather than inherited. */
  --uc-danger: #f87171;
  --uc-danger-surface: #1f1214;
  --uc-danger-border: #7f1d1d;
  --uc-danger-text: #fecaca;
  --uc-success: #4ade80;
  --uc-success-surface: #0f2018;
  --uc-success-border: #166534;
  --uc-success-text: #bbf7d0;
  --uc-warning: #fbbf24;
  --uc-warning-surface: #1a160c;
  --uc-warning-border: #92400e;
  --uc-warning-text: #fde68a;
  --uc-info: #60a5fa;
  --uc-info-surface: #0e1a2c;
  --uc-info-border: #1e40af;
  --uc-info-text: #bfdbfe;

  --uc-surface-raised: #161413;
  --uc-surface-sunken: #0a0909;
  --uc-surface-input: #1a1818;
  --uc-divider: #2e2828;
  --uc-scrim: rgba(0, 0, 0, 0.7);
  --uc-scrim-weak: rgba(0, 0, 0, 0.3);
  --uc-scrim-soft: rgba(0, 0, 0, 0.5);
  --uc-scrim-strong: rgba(0, 0, 0, 0.85);
  /* Washes invert on dark: a black veil over near-black is invisible, so the
     elevation wash is light here rather than dark. */
  --uc-wash-weak: rgba(248, 250, 252, 0.04);
  --uc-wash-soft: rgba(248, 250, 252, 0.08);
  --uc-wash-strong: rgba(248, 250, 252, 0.14);
  --uc-veil-weak: rgba(255, 255, 255, 0.08);
  --uc-veil-soft: rgba(255, 255, 255, 0.14);
  --uc-veil-strong: rgba(255, 255, 255, 0.22);
  --uc-primary-wash: rgba(201, 20, 24, 0.12);
  --uc-primary-wash-strong: rgba(201, 20, 24, 0.28);
  --uc-accent-wash: rgba(250, 204, 21, 0.16);
  --uc-accent-wash-strong: rgba(250, 204, 21, 0.34);
  --uc-shadow-ink-weak: rgba(0, 0, 0, 0.35);
  --uc-shadow-ink-soft: rgba(0, 0, 0, 0.55);
  --uc-shadow-ink-strong: rgba(0, 0, 0, 0.75);
  --uc-focus-ring: #facc15;
  --uc-state-hover: rgba(248, 250, 252, 0.06);
  --uc-state-active: rgba(248, 250, 252, 0.12);
  --uc-state-disabled: #7f8794;
  --uc-text-on-gold: #111111;
  --uc-chrome: #080808;
  --uc-chrome-text: #f8fafc;
  --uc-text-on-primary: #ffffff;
  --uc-text-inverse: #0a0909;
  /* App canvas (slide-layer) mesh — cool near-black, not mud red-brown. */
  --uc-page-surface: #0a0909;
  --uc-page-canvas-grid: color-mix(in srgb, #f8fafc 18%, transparent);
  /* Per-member chat tones: hue comes from the handle, lightness from the theme. */
  --uc-chat-tone-sat: 70%;
  --uc-chat-tone-text-l: 76%;
  --uc-chat-tone-bg-l: 18%;
  --uc-chat-tone-border-l: 34%;
  --uc-chat-tone-accent-l: 56%;

  /* Neutral ramps are INVERTED for the dark theme: slate-50 (lightest in Classic)
     becomes the darkest here. A rule that used a light ramp value for a background
     therefore gets a dark background, and one that used a dark ramp value for text
     gets light text — without touching the rule itself. */
  --uc-slate-50: #0f172a;
  --uc-slate-100: #1e293b;
  --uc-slate-200: #334155;
  --uc-slate-300: #475569;
  --uc-slate-400: #64748b;
  --uc-slate-500: #94a3b8;
  --uc-slate-600: #cbd5e1;
  --uc-slate-700: #e2e8f0;
  --uc-slate-800: #f1f5f9;
  --uc-slate-900: #f8fafc;

  --uc-gray-50: #111827;
  --uc-gray-100: #1f2937;
  --uc-gray-200: #374151;
  --uc-gray-300: #4b5563;
  --uc-gray-400: #6b7280;
  --uc-gray-500: #9ca3af;
  --uc-gray-600: #d1d5db;
  --uc-gray-700: #e5e7eb;
  --uc-gray-800: #f3f4f6;
  --uc-gray-900: #f9fafb;
}

/* Member shell wash — tokenized pages pick up surface/text */
body[data-uc-theme]:not([data-uc-page="signup"]) .uc-app-main,
body[data-uc-theme]:not([data-uc-page="signup"]) .uc-browse-shell,
body[data-uc-theme]:not([data-uc-page="signup"]) .main-card {
  background-color: var(--uc-surface);
  color: var(--uc-text);
  border-color: var(--uc-border);
}

body[data-uc-theme]:not([data-uc-page="signup"]) .section-header {
  background: linear-gradient(90deg, var(--uc-primary) 0%, var(--uc-primary-dark) 100%) !important;
}

body[data-uc-theme]:not([data-uc-page="signup"]) .uc-surface-btn--primary,
body[data-uc-theme]:not([data-uc-page="signup"]) .uc-dna-btn-primary {
  background-color: var(--uc-primary) !important;
  border-color: var(--uc-border-strong) !important;
  color: var(--uc-text-on-primary) !important;
}

/* Secondary CTAs must keep a hard DNA edge — faint `--uc-border` vanishes on Heat. */
body[data-uc-theme]:not([data-uc-page="signup"]) .uc-surface-btn--secondary {
  border: 2px solid var(--uc-border-strong) !important;
  box-shadow: 2px 2px 0 var(--uc-shadow-ink-strong) !important;
}

body[data-uc-theme="heat"]:not([data-uc-page="signup"]) .main-card,
body[data-uc-theme="heat"]:not([data-uc-page="signup"]) .uc-browse-shell,
body[data-uc-theme="heat"]:not([data-uc-page="signup"]) .uc-app-main {
  box-shadow: var(--uc-dna-shadow-soft);
}

/*
 * Heat card-body kill-switch: Classic paper ink (vibe-ink hex, #222, surface-raised)
 * painted onto .main-card vanishes on near-black plates. Force theme body copy.
 * Descendants with their own color (gold, primary-ink, on-primary headers) still win.
 */
body[data-uc-theme="heat"]:not([data-uc-page="signup"]) .main-card {
  color: var(--uc-text) !important;
}

/*
 * Pattern kill-switch for light-theme utility leftovers and placeholder ink.
 * Almost every page still ships Tailwind greys or mid-ramp "muted" colors that
 * were designed for white paper. On Heat those become charcoal on charcoal.
 * Remap once here so Porch, Confessions, Chat, and the rest share one fix.
 * Signup is deliberately excluded (out of customer-theme contract).
 */
body[data-uc-theme]:not([data-uc-page="signup"]) .text-gray-400,
body[data-uc-theme]:not([data-uc-page="signup"]) .text-gray-500,
body[data-uc-theme]:not([data-uc-page="signup"]) .text-slate-400,
body[data-uc-theme]:not([data-uc-page="signup"]) .text-slate-500,
body[data-uc-theme]:not([data-uc-page="signup"]) .text-neutral-400,
body[data-uc-theme]:not([data-uc-page="signup"]) .text-neutral-500 {
  color: var(--uc-text-muted) !important;
}

body[data-uc-theme]:not([data-uc-page="signup"]) .text-gray-600,
body[data-uc-theme]:not([data-uc-page="signup"]) .text-gray-700,
body[data-uc-theme]:not([data-uc-page="signup"]) .text-slate-600,
body[data-uc-theme]:not([data-uc-page="signup"]) .text-slate-700,
body[data-uc-theme]:not([data-uc-page="signup"]) .text-neutral-600,
body[data-uc-theme]:not([data-uc-page="signup"]) .text-neutral-700 {
  color: var(--uc-text-secondary) !important;
}

body[data-uc-theme]:not([data-uc-page="signup"]) .text-gray-800,
body[data-uc-theme]:not([data-uc-page="signup"]) .text-gray-900,
body[data-uc-theme]:not([data-uc-page="signup"]) .text-slate-800,
body[data-uc-theme]:not([data-uc-page="signup"]) .text-slate-900,
body[data-uc-theme]:not([data-uc-page="signup"]) .text-black {
  color: var(--uc-text) !important;
}

/*
 * Classic blank-card kill-switch: Heat leftover `text-white` utilities on paper
 * card bodies. Heat / Street / Concrete keep white (dark surfaces). Chrome,
 * photo overlays, and primary fills restore on-primary ink below.
 */
body[data-uc-theme="classic"]:not([data-uc-page="signup"])
  .main-card
  :is(.text-white, [class*="text-white/"]) {
  color: var(--uc-text) !important;
}

body[data-uc-theme="classic"]:not([data-uc-page="signup"])
  .main-card
  :is(
    .section-header,
    .uc-card-bottom-banner,
    .uc-inbox-stage-head,
    .uc-inbox-msg-bubble.is-self,
    .uc-home-hot-card,
    .uc-chat-lobby-hero,
    .uc-chat-lobby-hero-card,
    .uc-profile-section-header,
    .uc-surface-btn--primary,
    .uc-dna-btn-primary,
    [class*="bg-red-"],
    [class*="bg-black"],
    [class*="bg-slate-9"],
    [class*="bg-gray-8"],
    [class*="bg-neutral-9"],
    [class*="bg-zinc-9"]
  )
  :is(.text-white, [class*="text-white/"]),
body[data-uc-theme="classic"]:not([data-uc-page="signup"])
  .main-card
  :is(
    .section-header,
    .uc-card-bottom-banner,
    .uc-inbox-msg-bubble.is-self,
    .uc-surface-btn--primary,
    .uc-dna-btn-primary,
    [class*="bg-red-"],
    [class*="bg-black"],
    [class*="bg-slate-9"]
  ):is(.text-white, [class*="text-white/"]) {
  color: var(--uc-text-on-primary) !important;
}

body[data-uc-theme]:not([data-uc-page="signup"]) .bg-white,
body[data-uc-theme]:not([data-uc-page="signup"]) .bg-gray-50,
body[data-uc-theme]:not([data-uc-page="signup"]) .bg-slate-50,
body[data-uc-theme]:not([data-uc-page="signup"]) .bg-neutral-50 {
  background-color: var(--uc-surface-raised) !important;
}

/* Tailwind opacity utility variants (bg-white/80, bg-slate-50/50, etc.) bypass
 * exact-class remaps and paint paper white over Heat surfaces. Force surfaces. */
body[data-uc-theme]:not([data-uc-page="signup"]) [class*="bg-white/"],
body[data-uc-theme]:not([data-uc-page="signup"]) [class*="bg-gray-50/"],
body[data-uc-theme]:not([data-uc-page="signup"]) [class*="bg-slate-50/"],
body[data-uc-theme]:not([data-uc-page="signup"]) [class*="bg-gray-100/"],
body[data-uc-theme]:not([data-uc-page="signup"]) [class*="bg-slate-100/"] {
  background-color: var(--uc-surface-raised) !important;
}

/* Important-modifier greys (`!bg-gray-100`) ignore non-!important remaps. */
body[data-uc-theme]:not([data-uc-page="signup"]) [class*="!bg-gray"],
body[data-uc-theme]:not([data-uc-page="signup"]) [class*="!bg-slate"],
body[data-uc-theme]:not([data-uc-page="signup"]) [class*="!bg-white"],
body[data-uc-theme]:not([data-uc-page="signup"]) [class*="!bg-neutral"] {
  background-color: var(--uc-surface-muted) !important;
}

body[data-uc-theme]:not([data-uc-page="signup"]) [class*="!text-gray"],
body[data-uc-theme]:not([data-uc-page="signup"]) [class*="!text-slate"],
body[data-uc-theme]:not([data-uc-page="signup"]) [class*="!text-neutral"] {
  color: var(--uc-text-muted) !important;
}

body[data-uc-theme]:not([data-uc-page="signup"]) [class*="!border-gray"],
body[data-uc-theme]:not([data-uc-page="signup"]) [class*="!border-slate"],
body[data-uc-theme]:not([data-uc-page="signup"]) [class*="!border-neutral"] {
  border-color: var(--uc-border) !important;
}

body[data-uc-theme]:not([data-uc-page="signup"]) .bg-gray-100,
body[data-uc-theme]:not([data-uc-page="signup"]) .bg-slate-100,
body[data-uc-theme]:not([data-uc-page="signup"]) .bg-neutral-100,
body[data-uc-theme]:not([data-uc-page="signup"]) .bg-gray-200,
body[data-uc-theme]:not([data-uc-page="signup"]) .bg-slate-200,
body[data-uc-theme]:not([data-uc-page="signup"]) .bg-gray-300,
body[data-uc-theme]:not([data-uc-page="signup"]) .bg-slate-300 {
  background-color: var(--uc-surface-muted) !important;
}

body[data-uc-theme]:not([data-uc-page="signup"]) .border-gray-100,
body[data-uc-theme]:not([data-uc-page="signup"]) .border-slate-100,
body[data-uc-theme]:not([data-uc-page="signup"]) .border-neutral-100,
body[data-uc-theme]:not([data-uc-page="signup"]) .border-gray-200,
body[data-uc-theme]:not([data-uc-page="signup"]) .border-gray-300,
body[data-uc-theme]:not([data-uc-page="signup"]) .border-slate-200,
body[data-uc-theme]:not([data-uc-page="signup"]) .border-slate-300 {
  border-color: var(--uc-border) !important;
}

/* divide-* utilities set child border-color — same paper path as border-gray */
body[data-uc-theme]:not([data-uc-page="signup"]) .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
body[data-uc-theme]:not([data-uc-page="signup"]) .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
body[data-uc-theme]:not([data-uc-page="signup"]) .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
body[data-uc-theme]:not([data-uc-page="signup"]) .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--uc-divider, var(--uc-border)) !important;
}

/* Classic pink / cream status plates */
body[data-uc-theme]:not([data-uc-page="signup"]) .bg-red-50,
body[data-uc-theme]:not([data-uc-page="signup"]) .bg-rose-50,
body[data-uc-theme]:not([data-uc-page="signup"]) .hover\:bg-red-50:hover,
body[data-uc-theme]:not([data-uc-page="signup"]) .hover\:bg-rose-50:hover {
  background-color: var(--uc-danger-surface) !important;
}

body[data-uc-theme]:not([data-uc-page="signup"]) .bg-yellow-50,
body[data-uc-theme]:not([data-uc-page="signup"]) .bg-amber-50,
body[data-uc-theme]:not([data-uc-page="signup"]) [class*="bg-yellow-50/"] {
  background-color: var(--uc-warning-surface, var(--uc-surface-muted)) !important;
}

body[data-uc-theme]:not([data-uc-page="signup"]) ::placeholder {
  color: var(--uc-text-muted);
  opacity: 1;
}

body[data-uc-theme]:not([data-uc-page="signup"]) input,
body[data-uc-theme]:not([data-uc-page="signup"]) textarea,
body[data-uc-theme]:not([data-uc-page="signup"]) select {
  color: var(--uc-text);
}

body[data-uc-theme]:not([data-uc-page="signup"]) input::placeholder,
body[data-uc-theme]:not([data-uc-page="signup"]) textarea::placeholder {
  color: var(--uc-text-muted);
  opacity: 1;
}


/*
 * Brand red labels were Classic paper paints (`text-red-800`, darker brand fills as ink).
 * On Heat/dark surfaces those fail hard (~1.2–2.4:1). Map to primary-ink / danger-text.
 * Gold fill utilities always need dark ink (never heat body text / white).
 */
body[data-uc-theme]:not([data-uc-page="signup"]) .text-red-600,
body[data-uc-theme]:not([data-uc-page="signup"]) .text-red-700,
body[data-uc-theme]:not([data-uc-page="signup"]) .text-red-800,
body[data-uc-theme]:not([data-uc-page="signup"]) .text-red-900,
body[data-uc-theme]:not([data-uc-page="signup"]) .text-rose-600,
body[data-uc-theme]:not([data-uc-page="signup"]) .text-rose-700,
body[data-uc-theme]:not([data-uc-page="signup"]) .text-rose-800,
body[data-uc-theme]:not([data-uc-page="signup"]) .text-rose-900 {
  color: var(--uc-primary-ink) !important;
}

body[data-uc-theme]:not([data-uc-page="signup"]) .bg-yellow-300,
body[data-uc-theme]:not([data-uc-page="signup"]) .bg-yellow-400,
body[data-uc-theme]:not([data-uc-page="signup"]) .bg-yellow-500,
body[data-uc-theme]:not([data-uc-page="signup"]) .bg-amber-300,
body[data-uc-theme]:not([data-uc-page="signup"]) .bg-amber-400,
body[data-uc-theme]:not([data-uc-page="signup"]) .bg-amber-500 {
  color: var(--uc-text-on-gold) !important;
}

/* Ghost / outline controls that still paint primary-darker ink */
body[data-uc-theme]:not([data-uc-page="signup"]) .uc-surface-btn--ghost,
body[data-uc-theme]:not([data-uc-page="signup"]) .uc-btn-ghost {
  color: var(--uc-primary-ink) !important;
  border-color: var(--uc-danger-border) !important;
  background: transparent !important;
}

body[data-uc-theme]:not([data-uc-page="signup"]) .uc-surface-btn--accent,
body[data-uc-theme]:not([data-uc-page="signup"]) .uc-dna-btn-gold,
body[data-uc-theme]:not([data-uc-page="signup"]) .uc-dna-btn-accent {
  color: var(--uc-text-on-gold) !important;
}

/*
 * Site-wide ink hierarchy (Heat + every customer theme):
 * - Body / titles: --uc-text
 * - Soft meta: --uc-text-secondary / --uc-text-muted
 * - Brand identity (usernames, brand labels on surfaces): --uc-primary-ink
 * - DNA energy micro-copy (kickers, eyebrows, activity labels): --uc-gold
 * - On red chrome fills: --uc-text-on-primary
 * - On gold fills: --uc-text-on-gold
 *
 * When a role is mis-painted (e.g. pink kickers), fix the ROLE here — not one page.
 */
body[data-uc-theme]:not([data-uc-page="signup"]) :is(
  .uc-chat-lobby-kicker,
  .uc-chat-create-kicker,
  .uc-chat-system-room-activity-label,
  .uc-chat-lobby-room-latest-label,
  .uc-chat-room-kicker,
  .uc-chat-attachments-panel-kicker,
  .uc-chat-sticker-picker-kicker,
  .uc-chat-reply-bar-kicker,
  .uc-live-studio-play__kicker,
  .uc-live-studio-stage-meta__kicker,
  .uc-live-stream-room-kicker,
  .uc-live-hero__eyebrow,
  .uc-room-play-overlay__eyebrow,
  .uc-room-play-invite__eyebrow,
  .uc-nn-kicker,
  .uc-nn-stat-kicker,
  .uc-home-hot-card-kicker,
  .uc-porch-event-kicker,
  .uc-porch-visit-gate-kicker,
  .uc-porch-compose-overlay-kicker,
  .uc-porch-voice-kicker,
  .uc-canvas-editor-kicker,
  .uc-experts-board-kicker,
  .uc-experts-apply-kicker,
  .uc-experts-manage-kicker,
  .uc-experts-detail-kicker,
  .uc-residency-gate-kicker,
  .uc-room-share-overlay__kicker,
  .uc-settings-vibe-kicker,
  .uc-settings-metric-kicker,
  .uc-circles-map-hud-kicker,
  .uc-help-topic__kicker,
  .uc-help-center-panel__eyebrow,
  .uc-help-overlay__kicker,
  .uc-safety-overlay__kicker,
  .uc-profile-layout-studio__kicker,
  .uc-advertise-kicker,
  .uc-games-arena-kicker
) {
  color: var(--uc-gold) !important;
}

/* On red chrome fills, keep chrome ink (not gold / not primary-ink pink). */
body[data-uc-theme]:not([data-uc-page="signup"]) .section-header,
body[data-uc-theme]:not([data-uc-page="signup"]) .uc-chat-system-strip-head,
body[data-uc-theme]:not([data-uc-page="signup"]) .uc-chat-system-strip-title,
body[data-uc-theme]:not([data-uc-page="signup"]) .uc-card-bottom-banner {
  color: var(--uc-text-on-primary);
}

body[data-uc-theme]:not([data-uc-page="signup"]) .uc-chat-system-strip-hint {
  color: var(--uc-gold) !important;
}

/* Kicker on gold fill / gold hero field needs dark ink. */
body[data-uc-theme]:not([data-uc-page="signup"]) .uc-games-hero-kicker {
  color: var(--uc-text-on-gold) !important;
}

/* Live/on-air kickers keep brand pink (status signal, not DNA energy). */
body[data-uc-theme]:not([data-uc-page="signup"]) .uc-chat-room-kicker.is-onair {
  color: var(--uc-primary-ink) !important;
}

/* Settings theme picker */
.uc-settings-theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (min-width: 640px) {
  .uc-settings-theme-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.uc-settings-theme-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 10px;
  border: 2px solid var(--uc-border, #e5e7eb);
  border-radius: 12px;
  background: var(--uc-surface-soft, #f8f8f8);
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease;
}

.uc-settings-theme-card:hover {
  transform: translateY(-1px);
}

.uc-settings-theme-card.is-selected,
.uc-settings-theme-card[aria-pressed="true"] {
  border-color: var(--uc-primary, #b22222);
  box-shadow: var(--uc-dna-shadow-soft);
}

.uc-settings-theme-card__swatch {
  display: block;
  height: 44px;
  border-radius: 8px;
  border: 2px solid #050505;
  background:
    linear-gradient(135deg, var(--swatch-primary, #b22222) 0 42%, var(--swatch-accent, #facc15) 42% 62%, var(--swatch-surface, #fff) 62% 100%);
}

.uc-settings-theme-card[data-uc-theme-id="classic"] {
  --swatch-primary: #b22222;
  --swatch-accent: #facc15;
  --swatch-surface: #ffffff;
}

.uc-settings-theme-card[data-uc-theme-id="street"] {
  --swatch-primary: #f2bd22;
  --swatch-accent: #050505;
  --swatch-surface: #f8f1e8;
}

.uc-settings-theme-card[data-uc-theme-id="concrete"] {
  --swatch-primary: #242d3c;
  --swatch-accent: #facc15;
  --swatch-surface: #f8fafc;
}

.uc-settings-theme-card[data-uc-theme-id="heat"] {
  --swatch-primary: #c91418;
  --swatch-accent: #facc15;
  --swatch-surface: #140a0a;
}

.uc-settings-theme-card__label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--uc-text, #111827);
}

.uc-settings-theme-card__tag {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--uc-text-muted, #9ca3af);
}