/*
 * TradeMason public theme + interaction polish (visual only).
 *  - Light-mode element fixes for the token-driven public surface.
 *  - Floating theme-toggle button styling (works in both themes).
 *  - Phase 9 interaction polish: focus-visible rings, pressed/active states,
 *    mobile tap feedback. No layout, logic, IDs or handlers are affected.
 */

/* ------------------------------ Light theme ------------------------------ */
/* Most public styling is driven by the brand tokens, which the
   html[data-theme="light"] block in trademason-premium-tokens.css already
   flips. These rules fix the few elements that hardcode dark values. */
html[data-theme="light"] .tm-nav{
  background:rgba(255,255,255,.86);
  border-bottom-color:var(--tm-border);
}
html[data-theme="light"] .tm-section-alt{
  background:linear-gradient(180deg,rgba(15,23,42,.035),transparent);
}
html[data-theme="light"] .tm-btn-ghost{
  background:rgba(15,23,42,.03);
}
html[data-theme="light"] .tm-chase-item,
html[data-theme="light"] .tm-login-trust div,
html[data-theme="light"] .tm-login-note{
  background:rgba(15,23,42,.03);
}
/* The branded customer quote card must stay light/white in both themes. */
html[data-theme="light"] .tm-quote-preview{
  background:#ffffff;
  box-shadow:0 18px 48px rgba(15,23,42,.14);
}
/* Toasts use a hardcoded white text colour for dark mode. */
html[data-theme="light"] .tm-toast,
html[data-theme="light"] .tm-signup-toast,
html[data-theme="light"] .tm-checkout-card h2,
html[data-theme="light"] .tm-field input{
  color:var(--tm-text);
}
html[data-theme="light"] .tm-kpi strong{color:var(--tm-text)}

/* ----------------------- Premium light-mode depth ------------------------ */
/* A refined light canvas with a soft brand-gold glow, layered shadows on
   surfaces and crisp borders so light mode feels as premium as dark. */
html[data-theme="light"] body.tm-public{
  background:
    radial-gradient(1200px 520px at 88% -10%, rgba(212,160,23,.10), transparent 60%),
    radial-gradient(900px 520px at -5% 0%, rgba(15,23,42,.05), transparent 55%),
    var(--tm-bg);
  background-attachment:fixed;
}
/* Layered, soft elevation for cards/panels/surfaces. */
html[data-theme="light"] .tm-card,
html[data-theme="light"] .tm-trust,
html[data-theme="light"] .tm-kpi,
html[data-theme="light"] .tm-step,
html[data-theme="light"] .tm-step-panel,
html[data-theme="light"] .tm-plan,
html[data-theme="light"] .tm-recovery-card,
html[data-theme="light"] .tm-preview-row,
html[data-theme="light"] .tm-calc-panel,
html[data-theme="light"] .tm-calc-result,
html[data-theme="light"] .tm-calc-stat,
html[data-theme="light"] .tm-phone-tab,
html[data-theme="light"] .tm-preview-tab,
html[data-theme="light"] .tm-login-preview,
html[data-theme="light"] .tm-login-form-card,
html[data-theme="light"] .tm-login-flow-step,
html[data-theme="light"] .tm-login-flow-detail,
html[data-theme="light"] .tm-checkout-card{
  border-color:rgba(15,23,42,.08);
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 14px 32px rgba(15,23,42,.07);
}
/* Premium phone mockup framing in light. */
html[data-theme="light"] .tm-phone{
  border-color:rgba(212,160,23,.4);
  background:linear-gradient(160deg,#ffffff,#eef2f7);
  box-shadow:0 30px 70px rgba(15,23,42,.16);
}
html[data-theme="light"] .tm-phone-screen{
  background:#fbfcfe;
  border-color:rgba(15,23,42,.08);
}
/* Deeper, intentional lift on hover for clickable surfaces. */
html[data-theme="light"] .tm-card:hover,
html[data-theme="light"] .tm-plan:hover,
html[data-theme="light"] .tm-recovery-card:hover{
  border-color:rgba(212,160,23,.42);
  box-shadow:0 2px 4px rgba(15,23,42,.06),0 22px 48px rgba(15,23,42,.12);
}
/* Selected / popular plan keeps a warm gold halo. */
html[data-theme="light"] .tm-plan.is-selected{
  border-color:rgba(212,160,23,.55);
  box-shadow:0 2px 4px rgba(15,23,42,.06),0 24px 56px rgba(212,160,23,.18);
}
/* Refined gold primary button shadow (lighter than the dark-mode glow). */
html[data-theme="light"] .tm-btn-gold{
  box-shadow:0 10px 26px rgba(212,160,23,.28);
}
html[data-theme="light"] .tm-btn-gold:hover{
  box-shadow:0 16px 36px rgba(212,160,23,.34);
}
/* Ghost / secondary controls read as crisp outlined chips. */
html[data-theme="light"] .tm-btn-ghost,
html[data-theme="light"] .tm-nav-login{
  border-color:rgba(15,23,42,.12);
}
/* Inputs sit on white with a subtle inset for depth. */
html[data-theme="light"] .tm-field input,
html[data-theme="light"] .tm-login-form input{
  background:#ffffff;
  border-color:rgba(15,23,42,.14);
  box-shadow:inset 0 1px 2px rgba(15,23,42,.05);
}
/* Sticky nav gains a soft hairline shadow for separation. */
html[data-theme="light"] .tm-nav{
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}
/* Footer hairline. */
html[data-theme="light"] .tm-footer{
  border-top-color:rgba(15,23,42,.1);
}

/* --------------------------- Theme toggle button ------------------------- */
.tm-theme-toggle{
  position:fixed;
  right:max(16px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom));
  z-index:120;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:var(--tm-tap);
  padding:0 16px 0 13px;
  border-radius:var(--tm-radius-pill);
  border:1px solid var(--tm-border-strong);
  background:var(--tm-surface-raised);
  color:var(--tm-text);
  font-family:var(--tm-font);
  font-weight:800;
  font-size:.82rem;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.30);
  -webkit-tap-highlight-color:var(--tm-tap-highlight);
  transition:transform var(--tm-transition-fast),box-shadow var(--tm-transition-fast),border-color var(--tm-transition-fast),background var(--tm-transition-fast);
}
.tm-theme-toggle:hover{
  transform:translateY(-2px);
  border-color:var(--tm-gold);
  box-shadow:0 16px 38px rgba(212,160,23,.22);
}
.tm-theme-toggle:active{transform:translateY(0) scale(.97)}
html[data-theme="light"] .tm-theme-toggle{
  border-color:rgba(15,23,42,.12);
  box-shadow:0 10px 28px rgba(15,23,42,.14);
}
.tm-theme-toggle:focus-visible{outline:none;box-shadow:var(--tm-focus-ring)}
.tm-theme-toggle .tm-theme-ico{display:none;color:var(--tm-gold)}
.tm-theme-toggle .tm-theme-label{letter-spacing:.04em}
html[data-theme="dark"] .tm-theme-toggle .tm-theme-moon{display:inline-flex}
html[data-theme="light"] .tm-theme-toggle .tm-theme-sun{display:inline-flex}
html:not([data-theme="light"]) .tm-theme-toggle .tm-theme-moon{display:inline-flex}

/* --------------------- Phase 9: interaction polish ----------------------- */
/* Accessible focus rings for keyboard users across interactive elements. */
body.tm-public a:focus-visible,
body.tm-public button:focus-visible,
body.tm-public input:focus-visible,
body.tm-public select:focus-visible,
body.tm-public textarea:focus-visible,
body.tm-public [tabindex]:focus-visible,
body.tm-public [role="button"]:focus-visible{
  outline:none;
  box-shadow:var(--tm-focus-ring);
  border-radius:var(--tm-radius-sm);
}
/* Fast tap feedback + pressed states on touch-friendly controls. */
body.tm-public .tm-btn,
body.tm-public .tm-phone-tab,
body.tm-public .tm-preview-tab,
body.tm-public .tm-plan,
body.tm-public .tm-step,
body.tm-public .tm-chase-item,
body.tm-public .tm-recovery-card,
body.tm-public .tm-login-flow-step,
body.tm-public .tm-kpi{
  -webkit-tap-highlight-color:var(--tm-tap-highlight);
}
body.tm-public .tm-btn:active{transform:translateY(1px) scale(.985)}
body.tm-public .tm-btn-gold:active{box-shadow:0 6px 18px rgba(212,160,23,.30)}
body.tm-public .tm-phone-tab:active,
body.tm-public .tm-preview-tab:active,
body.tm-public .tm-login-flow-step:active,
body.tm-public .tm-chase-item:active{transform:scale(.98)}
body.tm-public .tm-card:active,
body.tm-public .tm-plan:active,
body.tm-public .tm-recovery-card:active{transform:translateY(-1px)}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce){
  body.tm-public *,
  .tm-theme-toggle{transition:none !important;animation:none !important}
}

@media (max-width:520px){
  .tm-theme-toggle{font-size:.78rem;padding:0 13px 0 11px}
}