/* ═══════════════════════════════════════════════════════════════════════════
   theme-calm.css — opt-in "calm glass" refinement, layered on top of the
   immersive editor shell (body.ui-next).

   Scoped entirely to body.theme-calm so the current UI is byte-for-byte
   untouched when the class is absent. Designed to coexist with the classic /
   ui-next looks so the product can be transitioned gradually (per-user toggle).

   Activate:  document.body.classList.add('theme-calm')
              ?theme=calm / ?theme=classic  (persisted)  ·  window.ndSetTheme('calm')

   Identity decisions (see also the migration plan):
     • Accent stays the canonical brand blue (#3b82f6) — only its glow is calmed.
     • Body text stays Inter; Sora is added for display headings only.
     • These panels float over a LIGHT canvas, so glass is softened via hue,
       shadow and rounding — NOT by dropping opacity (that would make panels
       read milky/illegible over the bright field).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Token retune — cascades to every component that reads these vars ──────── */
body.theme-calm {
  /* Warmer, lifted glass. MUST stay near-opaque: these panels float over a
     LIGHT canvas, so any meaningful transparency lets the bright field bleed up
     through the blur and the chrome reads as a white/milky fog. We get the
     "calm" feel from hue + softer shadow + rounding, NOT from lowering alpha. */
  --glass-bg:     rgba(24, 26, 33, 0.93);
  --glass-bg-2:   rgba(30, 32, 40, 0.95);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --glass-blur:   blur(16px) saturate(125%);

  /* Lifted, faintly warm base surfaces (was near-black #0f1117 / #0b0d13). */
  --bg-app:        #16171c;
  --bg-sidebar:    #181a20;
  --bg-toolbar:    #181a20;
  --bg-card:       #20222a;
  --bg-card-hover: #262934;
  --bg-modal:      #1c1e25;
  --surface-hover: #262934;

  /* Rounder corners. */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Softer, larger, less harsh layered shadows. */
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), var(--edge-light);
  --shadow-md: 0 14px 36px -18px rgba(0, 0, 0, 0.48), var(--edge-light);
  --shadow-lg: 0 24px 60px -28px rgba(0, 0, 0, 0.55), var(--edge-light);

  /* Keep brand blue; only calm the accent glow. */
  --accent-glow: rgba(59, 130, 246, 0.16);

  /* Display face for headings — body text stays Inter (--font). */
  --font-display: 'Sora', var(--font);
}

/* ── Display font on brand mark + headings only ───────────────────────────── */
body.theme-calm .logo,
body.theme-calm .logo-word,
body.theme-calm .nav-logo,
body.theme-calm .brand-name,
body.theme-calm h1,
body.theme-calm h2,
body.theme-calm h3 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

/* ── Rounder floating chrome ───────────────────────────────────────────────
   ui-next sets these radii as literals (not tokens), so override the surfaces
   directly. The compound body.ui-next.theme-calm selector outranks ui-next's
   own body.ui-next rules regardless of stylesheet order. */
@media (min-width: 769px) {
  body.ui-next.theme-calm .topbar,
  body.ui-next.theme-calm .sidebar,
  body.ui-next.theme-calm .toolbar,
  body.ui-next.theme-calm .team-chat-panel,
  body.ui-next.theme-calm .floating-props-panel {
    border-radius: 20px;
  }
  body.ui-next.theme-calm .status-bar {
    border-radius: 16px;
  }
}

/* ── Calmer canvas: lighter field, quieter dotted grid, gentler blue vignette ── */
body.ui-next.theme-calm .canvas-area {
  background-color: #f1f2f6;
  background-image:
    radial-gradient(130% 90% at 50% -15%, rgba(59, 130, 246, 0.04), transparent 64%),
    radial-gradient(circle, rgba(90, 100, 130, 0.12) 1px, transparent 1.5px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD surfaces (dashboard.html)
   dashboard.css uses its own token names (--bg / --surface / --card /
   --shadow-1..3 / --radius). They're harmless to the editor (which never reads
   them), so they share this opt-in block. Unlike the editor, the dashboard sits
   on a DARK background — so a faint ambient tint is safe here.
   ═══════════════════════════════════════════════════════════════════════════ */
body.theme-calm {
  --bg:           #16171c;
  --surface:      #1b1d23;
  --bg-secondary: #1b1d23;
  --card:         #20222a;
  --elev-3:       #262934;
  --radius:       16px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30), var(--edge-light);
  --shadow-2: 0 14px 36px -18px rgba(0, 0, 0, 0.48), var(--edge-light);
  --shadow-3: 0 24px 60px -28px rgba(0, 0, 0, 0.55), var(--edge-light);
  --card-shadow:       var(--shadow-1);
  --card-shadow-hover: var(--shadow-3);
}

/* Brand wordmark joins the Sora heading set defined above. */
body.theme-calm .brand-text {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

/* Faint ambient glow behind the dashboard grid (dark bg → safe to tint). */
body.theme-calm .dash-layout {
  background:
    radial-gradient(64rem 44rem at 100% -12%, rgba(59, 130, 246, 0.06), transparent 60%),
    var(--bg);
}

/* Gentle rounding bump on nav / sidebar pills, to match the rounder cards. */
body.theme-calm .nav-item,
body.theme-calm .btn-sidebar {
  border-radius: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING + AUTH pages
   index.html (index.css)  ·  login / accept-invite / accept-org-invite (login.css)
   Both share the --bg / --card / --radius names already retuned in the dashboard
   block above, so the base lift cascades for free. Here we add the page-specific
   extras and tame a few hardcoded colours on the invite cards.
   ═══════════════════════════════════════════════════════════════════════════ */
body.theme-calm {
  /* index.css secondary surfaces */
  --bg2:   #1b1d23;
  --card2: #262934;
  /* login.css inputs + invite-card fallback var */
  --input-bg: #1b1d23;
  --card-bg:  #20222a;
}

/* Invite cards (accept-invite / accept-org-invite) use inline-styled hardcoded
   colours that bypass tokens — nudge them onto the calm palette. */
body.theme-calm .invite-card {
  background: var(--card);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.55);
}
body.theme-calm .invite-title { color: var(--text); }
body.theme-calm .invite-sub   { color: var(--text-muted); }

/* Respect reduced-transparency / contrast preferences — fall back to opaque. */
@media (prefers-reduced-transparency: reduce) {
  body.theme-calm {
    --glass-bg:   rgba(22, 23, 28, 0.97);
    --glass-bg-2: rgba(28, 30, 37, 0.98);
    --glass-blur: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING — de-AI refinement  ·  Heating/Cooling (red ↔ blue)   (index.html only)
   ───────────────────────────────────────────────────────────────────────────
   Goal: strip the generic "AI-generated dark SaaS" look — tri-colour
   blue→indigo→cyan gradients, gradient headline text, colour-glow shadows,
   glassmorphism, blob backdrops, decorative chrome — and replace it with the
   HVAC thermostat duality: RED = heating, BLUE = cooling. The two poles are a
   deliberate axis (red drives action/CTA + warm pole; blue carries the cool /
   informational / blueprint pole), so blue never reads as "default AI blue"
   because red is always present beside it.

   SCOPING: every rule is gated on `body.theme-calm.lp-page`. `lp-page` is a
   static class on index.html's <body> ONLY, so although --accent / --bg / --card
   are shared token names, this retune cannot reach the editor or dashboard
   (which carry theme-calm but not lp-page). The higher specificity also outranks
   index.css's own `:root` / bare-class rules regardless of stylesheet order.

   Activate:  ?theme=calm   (persisted)   ·   classic stays the live default.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Token retune: red/blue heat-cool poles on neutral-dark surfaces ───────── */
body.theme-calm.lp-page {
  --heat:        #e24a2e;   /* HEATING — warm flame red (CTAs, warm pole, energy) */
  --heat-strong: #f07351;   /* lighter red for icons/text on dark              */
  --heat-deep:   #c23a20;   /* button hover/press                              */
  --cool:        #2c9fd1;   /* COOLING — icy cyan-blue (informational pole)    */
  --cool-strong: #5cbbe2;   /* lighter icy blue for icons/text on dark         */
  --cool-deep:   #1d7aab;

  /* General informational accent = the COOL/blue pole (blueprint feel).
     CTAs are explicitly re-pointed to --heat below, so this stays blue. */
  --accent:  #2c9fd1;
  --accent2: #1d7aab;

  /* Neutral-dark base surfaces (no warm/cool cast — lets red & blue read true). */
  --bg:    #121418;
  --bg2:   #171a1f;
  --card:  #1b1e24;
  --card2: #23272e;
  --border:  rgba(255, 255, 255, 0.07);
  --border2: rgba(255, 255, 255, 0.12);

  /* Faint blueprint-blue grid (conventional for technical drawing). */
  --grid:        rgba(120, 160, 210, 0.045);
  --grid-strong: rgba(120, 160, 210, 0.085);
}

/* ── 1 · Flat headline — kill the 3-stop gradient text (the strongest tell) ── */
body.theme-calm.lp-page .gradient-text {
  background: none;
  -webkit-background-clip: border-box;
          background-clip: border-box;
  -webkit-text-fill-color: var(--cool-strong);
  color: var(--cool-strong);
}

/* ── 2 · Heat/cool brand mark + red CTAs + cool accents ────────────────────── */
/* Logo tile: the ONE intentional gradient — a hot→cold thermostat motif. */
body.theme-calm.lp-page .nav-logo-icon {
  background: linear-gradient(135deg, var(--heat), var(--cool));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
/* Primary CTAs → RED (heating / action). White text reads fine on this red. */
body.theme-calm.lp-page .btn-primary,
body.theme-calm.lp-page .btn-hero-primary,
body.theme-calm.lp-page .cw-btn-primary { background: var(--heat); color: #fff; }
body.theme-calm.lp-page .btn-primary:hover,
body.theme-calm.lp-page .cw-btn-primary:hover { background: var(--heat-deep); }

/* "How it works" active step → cool/blue, neutral shadow (was gradient + glow). */
body.theme-calm.lp-page .step.active .step-num {
  background: var(--cool);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* Feature-icon tiles: split across the two poles so RED and BLUE both read
   prominently across the grid (green stays as the compliance/status colour). */
body.theme-calm.lp-page .feature-icon.blue   { background: rgba(44, 159, 209, 0.13); color: var(--cool-strong); }
body.theme-calm.lp-page .feature-icon.cyan   { background: rgba(44, 159, 209, 0.10); color: #8fc1ea; }
body.theme-calm.lp-page .feature-icon.violet { background: rgba(226, 74, 46, 0.13);  color: var(--heat-strong); }
body.theme-calm.lp-page .feature-icon.rose   { background: rgba(226, 74, 46, 0.10);  color: #ec8b78; }
body.theme-calm.lp-page .feature-icon.amber  { background: rgba(140, 152, 172, 0.12); color: #aab4c6; }
body.theme-calm.lp-page .ai-feature-icon {
  background: rgba(44, 159, 209, 0.12);
  color: var(--cool-strong);
}
/* Energy Estimator icon → the heat (red) pole, so the AI section shows both. */
body.theme-calm.lp-page .ai-feature-icon.heat {
  background: rgba(226, 74, 46, 0.12);
  color: var(--heat-strong);
}

/* Pills / badges / chips that hardcode blue rgba → cool pole. */
body.theme-calm.lp-page .price-tag,
body.theme-calm.lp-page .standard-badge {
  background: rgba(44, 159, 209, 0.10);
  border-color: rgba(44, 159, 209, 0.24);
  color: var(--cool-strong);
}
body.theme-calm.lp-page .chat-bubble-user {
  background: rgba(44, 159, 209, 0.14);
  border-color: rgba(44, 159, 209, 0.25);
}
/* Hero canvas chips → an explicit red(heat) / blue(cool) / green(pass) trio. */
body.theme-calm.lp-page .draft-chip.data {
  color: var(--cool-strong);
  border-color: rgba(44, 159, 209, 0.35);
}
body.theme-calm.lp-page .draft-chip.flow {
  color: var(--heat-strong);
  border-color: rgba(226, 74, 46, 0.40);
}
/* Calculator accents that hardcode blue (most others read var(--accent)). */
body.theme-calm.lp-page .cw-step-num {
  background: rgba(44, 159, 209, 0.15);
  border-color: rgba(44, 159, 209, 0.30);
}
body.theme-calm.lp-page .cw-preset:hover { background: rgba(44, 159, 209, 0.10); }
body.theme-calm.lp-page .cw-unit-rec {
  background: rgba(44, 159, 209, 0.07);
  border-color: rgba(44, 159, 209, 0.18);
}
/* Beta banner / callout (hidden unless beta is on) → cool pole, drop indigo/violet. */
body.theme-calm.lp-page .beta-banner {
  background: rgba(44, 159, 209, 0.12);
  border-bottom-color: rgba(44, 159, 209, 0.25);
}
body.theme-calm.lp-page .beta-banner i,
body.theme-calm.lp-page .beta-banner-link { color: var(--cool-strong); }
body.theme-calm.lp-page #betaCallout {
  background: var(--bg2);
  border-bottom-color: var(--border);
}
body.theme-calm.lp-page .beta-callout-icon,
body.theme-calm.lp-page .beta-callout-cta {
  background: rgba(44, 159, 209, 0.14);
  border-color: rgba(44, 159, 209, 0.30);
  color: var(--cool-strong);
}

/* ── 3 · Neutral elevation — replace every brand-colour glow with black ────── */
body.theme-calm.lp-page .btn-hero-primary { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); }
body.theme-calm.lp-page .btn-hero-primary:hover {
  background: var(--heat-deep);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}
body.theme-calm.lp-page .price-card.pop { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.40); }
body.theme-calm.lp-page .feature-card:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.40); }

/* ── 4 · De-glass — solid surfaces, blur only on the (subtle) sticky nav ───── */
body.theme-calm.lp-page nav { background: rgba(18, 20, 24, 0.85); }
body.theme-calm.lp-page .draft-chip { backdrop-filter: none; background: #15181d; }
body.theme-calm.lp-page .mobile-nav { backdrop-filter: none; background: #121418; }
body.theme-calm.lp-page .beta-banner { backdrop-filter: none; }

/* ── 5 · Calm the backdrops — two faint poles (cool top, warm low) not a triple-blob ── */
body.theme-calm.lp-page .hero::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% -8%, rgba(44, 159, 209, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 82% 78%, rgba(226, 74, 46, 0.06) 0%, transparent 60%);
}
body.theme-calm.lp-page .ai-section { background: var(--bg2); }
body.theme-calm.lp-page .cta-card::before {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(44, 159, 209, 0.10), transparent 70%),
    linear-gradient(var(--grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-strong) 1px, transparent 1px);
  background-size: auto, 40px 40px, 40px 40px;
}
/* Canvas scan-sweep: cool blue + dimmer, not a bright laser (decorative). */
body.theme-calm.lp-page .draft-scan {
  background: linear-gradient(180deg, transparent 0%, transparent 38%, rgba(44, 159, 209, 0.16) 75%, rgba(92, 187, 226, 0.50) 100%);
  border-bottom-color: rgba(92, 187, 226, 0.60);
  box-shadow: 0 0 18px rgba(44, 159, 209, 0.30);
}

/* ── 6 · Demote decorative chrome — static dots, monochrome window, no float ── */
body.theme-calm.lp-page .hero-eyebrow .dot,
body.theme-calm.lp-page .draft-title .live .dot {
  animation: none;
  background: var(--text3);
  box-shadow: none;
}
/* mac "traffic light" dots are inline-styled red/yellow/green → neutralise. */
body.theme-calm.lp-page .draft-dot { background: var(--text3) !important; }
/* Drop the universal hover-lift; keep colour/shadow feedback only. */
body.theme-calm.lp-page .feature-card:hover,
body.theme-calm.lp-page .btn-primary:hover,
body.theme-calm.lp-page .btn-hero-primary:hover { transform: none; }