/* Polca product skin.
 *
 * The shared application still serves the LifePros tenant, so every rule in
 * this file is gated by html.profile-polca.  The aliases intentionally cover
 * the legacy, current React, embedded-tool, and theme-B token namespaces: a
 * Polca user should never fall back to the inherited LifePros gold palette.
 */
html.profile-polca,
html.profile-polca[data-mode="light"],
html.profile-polca[data-theme="B"],
html.profile-polca[data-mode="light"][data-theme="B"] {
  --polca-orange: #c85f3a;
  --polca-orange-rgb: 200, 95, 58;
  --polca-orange-hover: #d76e47;
  --polca-orange-pressed: #a64024;
  --polca-orange-text-dark: #e89a79;
  --polca-orange-text-light: #a64024;
  --polca-orange-text: var(--polca-orange-text-dark);
  --polca-orange-soft: rgba(200, 95, 58, .12);
  --polca-orange-border: rgba(200, 95, 58, .5);
  /* Fill role: an orange that white button text can sit on. The brand orange
     above measures 4.07:1 against white, under the 4.5:1 AA minimum for the
     11-14px labels every primary button, badge and Clock In uses. This is the
     same hue, one step deeper (4.83:1); hover and pressed go darker still so
     they never drop below it. The brand orange stays for marks, borders,
     icons and focus rings. */
  --polca-orange-fill: #b85432;
  --polca-orange-fill-hover: #a84a2b;
  --polca-orange-fill-pressed: #963f24;

  --lp-brand-gold-fill: var(--polca-orange-fill) !important;
  --lp-brand-gold-hover: var(--polca-orange-fill-hover) !important;
  --lp-brand-gold-pressed: var(--polca-orange-fill-pressed) !important;
  --lp-brand-gold-ink: #ffffff !important;
  --lp-brand-gold-subtle: var(--polca-orange-soft) !important;
  --lp-brand-gold-border: var(--polca-orange-border) !important;
  --lp-brand-gold-text: var(--polca-orange-text-dark) !important;
  --lp-gold: var(--polca-orange-fill) !important;
  --lp-gold-text: var(--polca-orange-text-dark) !important;
  --lp-gold-soft: var(--polca-orange-soft) !important;
  --lp-accent-ink: #ffffff !important;
  --lp-focus: 0 0 0 3px rgba(200, 95, 58, .34) !important;

  --gold: var(--polca-orange-fill) !important;
  --gold-light: var(--polca-orange) !important;
  --gold-dark: var(--polca-orange-fill-pressed) !important;
  --gold-text: var(--polca-orange-text-dark) !important;
  --gold-bg: var(--polca-orange-soft) !important;
  --gold-glow: rgba(200, 95, 58, .18) !important;
  --shadow-gold: 0 4px 20px rgba(200, 95, 58, .24), 0 0 40px rgba(200, 95, 58, .07) !important;

  --rd-strong: var(--polca-orange-fill) !important;
  --rd-strong-ink: #ffffff !important;
  --v-gold-t: var(--polca-orange-text-dark) !important;
  --login-gold: var(--polca-orange) !important;
  --uw-gold: var(--polca-orange) !important;
  --uw-gold-soft: var(--polca-orange-soft) !important;
  --teal: var(--polca-orange) !important;
  --teal-light: var(--polca-orange-hover) !important;
  --teal-dark: var(--polca-orange-pressed) !important;
  --teal-bg: var(--polca-orange-soft) !important;
  --teal-glow: rgba(200, 95, 58, .18) !important;

  /* Transparent accents that predate the semantic token system. */
  --lp-legacy-gold-rgb: 200, 95, 58;
  --lp-light-gold-rgb: 200, 95, 58;
  --lp-brand-fill-rgb: 200, 95, 58;
  --lp-conversation-gold-rgb: 200, 95, 58;
  --lp-settings-gold-rgb: 200, 95, 58;
  --lp-tool-gold-rgb: 200, 95, 58;
  --lp-warning-rgb: 217, 130, 67;

  /* Legacy warning/orange aliases were visually yellow. Polca uses its own
     warm orange for those states while preserving red/green semantics. */
  --orange: var(--polca-orange) !important;
  --orange-bg: var(--polca-orange-soft) !important;
  --warning: #d98243 !important;
  --warning-bg: rgba(217, 130, 67, .12) !important;
  accent-color: var(--polca-orange);
}

html.profile-polca[data-mode="light"],
html.profile-polca[data-mode="light"][data-theme="B"] {
  --polca-orange-text: var(--polca-orange-text-light);
  --lp-brand-gold-text: var(--polca-orange-text-light) !important;
  --lp-gold-text: var(--polca-orange-text-light) !important;
  --gold-text: var(--polca-orange-text-light) !important;
  --v-gold-t: var(--polca-orange-text-light) !important;
}

html.profile-polca .polca-mark {
  background: linear-gradient(145deg, var(--polca-orange-hover), var(--polca-orange-pressed)) !important;
  box-shadow: 0 8px 20px rgba(166, 64, 36, .22);
}

/* Isolated overlays declare private gold variables on the overlay itself. */
html.profile-polca .lpfu-dialog-backdrop {
  --gold: var(--polca-orange) !important;
  --gold-text: var(--polca-orange-text-dark) !important;
}
html.profile-polca[data-mode="light"] .lpfu-dialog-backdrop {
  --gold-text: var(--polca-orange-text-light) !important;
}

/* Notifications (bell panel, notifications page, message cards, toasts and
   the pop-up settings) declare their own --n-gold on the overlay element, so
   the html-level remap above never reached them: Reply buttons, lane
   avatars, tags and the toast "Undo" rendered Life Pros gold on Polca. */
html.profile-polca :is(.notif-dropdown, .notif-page, .ev-container, .fb-container, .pop-set) {
  --n-gold: var(--lp-brand-gold-fill) !important;
  --n-gold-soft: var(--lp-brand-gold-subtle) !important;
}
html.profile-polca :is(.notif-av.g, .notif-tag.g) {
  color: var(--lp-brand-gold-text) !important;
}
html.profile-polca .notif-btn.pri {
  color: var(--lp-brand-gold-ink) !important;
}
/* Legacy modal primary buttons paint near-black ink on the fill. */
html.profile-polca .modal-actions .btn-save {
  color: var(--lp-brand-gold-ink) !important;
}

/* A few production surfaces still contain literal pre-token gold values. */
html.profile-polca :is(.lpl-hero__eyebrow, .lpl-hero__summary small, .lpl-result-context button, .lpl-notes > small, .lpl-manage-shares) {
  color: var(--lp-brand-gold-text) !important;
}
html.profile-polca .lpl-thread article.is-out p {
  background: var(--lp-brand-gold-fill) !important;
  color: var(--lp-brand-gold-ink) !important;
}
html.profile-polca :is(.lpc-dot--personal, .lpc-dot--gold) {
  background: var(--lp-brand-gold-fill) !important;
}
html.profile-polca :is(.lpc-event, .lpc-event--gold, .lpc-color) {
  --event: var(--lp-brand-gold-fill) !important;
  --color: var(--lp-brand-gold-fill) !important;
}
html.profile-polca :is(.lpc-drag-preview, .lpc-month-day.is-drop-target, .lpc-time-day.is-drop-target) {
  border-color: var(--lp-brand-gold-fill) !important;
}
html.profile-polca :is(.co-scope .co-play:hover, .co-pop-dot, .lpconv-dropzone, .lpconv-composer__box .lpconv-licensemenu__pop button:hover) {
  --co-gold: var(--lp-brand-gold-fill);
}
html.profile-polca :is(.pol-warn, .lpc-source-warning, .lpc-readonly) {
  --pol-warning: #d98243;
}
html.profile-polca :is(.lppol-status--warning, .lppol-health-card--warning > header span, .set-chip.is-attention) {
  color: #d98243 !important;
}
html.profile-polca svg [stroke="#f59e0b"] {
  stroke: var(--polca-orange) !important;
}

/* Embedded presentation/tool UI. These pages receive profile-polca from the
   server renderer, so they share the same orange system without changing the
   LifePros versions of the documents. */
html.profile-polca :is(.pm-nav-tab.active, .pm-progress-fill, .pm-btn--primary) {
  background-color: var(--lp-brand-gold-fill) !important;
  border-color: var(--lp-brand-gold-fill) !important;
  color: var(--lp-brand-gold-ink) !important;
}
html.profile-polca :is(.pm-hh-btn.active, .pm-section-title, .pm-kicker, .pm-btn--quoter) {
  color: var(--lp-brand-gold-text) !important;
  border-color: var(--lp-brand-gold-border) !important;
}

html.profile-polca ::selection {
  background: rgba(200, 95, 58, .24) !important;
}

/* The legacy shell paints three viewport-sized, permanently animated layers
   with 100px GPU blur plus a full-screen SVG turbulence filter.  They add no
   product information and can exhaust a constrained browser renderer. */
html.profile-polca .mesh-blob,
html.profile-polca .grid-bg {
  display: none !important;
  animation: none !important;
  filter: none !important;
}
html.profile-polca body::before {
  content: none !important;
  display: none !important;
}

/* ── Dialers (Power Dialer, dock, AI Dialer) ─────────────────────────────
   index.html declares the --v-* text ramp on the view elements themselves
   (#view-power-dialer, #pdDock, …), so the root-level --v-gold-t above never
   reaches them: light mode fell back to the LifePros #7a5d15 and dark mode to
   the orange FILL (4.1:1 on the 9.6px chips). Re-point the ramp at the Polca
   text shades on the same elements. */
html.profile-polca :is(#view-vapi-calls, #view-power-dialer, #view-settings, #view-tools, #view-sales,
  #view-training, #view-guides, #view-presentation-archive, #pdDock, #pdDockBubble) {
  --v-gold-t: var(--polca-orange-text-dark) !important;
}
html.profile-polca[data-mode="light"] :is(#view-vapi-calls, #view-power-dialer, #view-settings, #view-tools, #view-sales,
  #view-training, #view-guides, #view-presentation-archive, #pdDock, #pdDockBubble) {
  --v-gold-t: var(--polca-orange-text-light) !important;
}
/* Ink on the orange dialer buttons (Start, Start here, Save & Next, drawer
   Save, Resume). LifePros keeps its near-black via the fallback in index.html. */
html.profile-polca {
  --pd-gold-ink: var(--lp-brand-gold-ink);
}
/* "Still trying" (ringing, connecting, the No-answer pill). LifePros uses its
   gold for this, which on Polca is the same warm hue as the red "ended" and
   the Voicemail/Not-interested pills. A calm slate blue keeps in-progress
   visibly different from finished. --lp-info is #89a4bc dark / #566f84 light
   (7.6:1 and 5.2:1 on the dock surface). */
html.profile-polca {
  --pd-wait: var(--lp-info);
  --pd-wait-t: var(--lp-info);
  --pd-wait-rgb: 137, 164, 188;
}
html.profile-polca[data-mode="light"] {
  --pd-wait-rgb: 86, 111, 132;
}