/* ═══════════════════════════════════════════════════════════════════════════
   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;
  }
}