/* ═══════════════════════════════════════════════════════════════════════════
   theme-light.css — opt-in LIGHT theme.

   The product ships dark (classic / calm / hybrid are all dark variants). This
   file is the first light option. Like the other themes it is scoped entirely
   to a body class (body.theme-light) and ONLY re-tunes colour/elevation tokens,
   so when the class is absent the UI is byte-for-byte unchanged. Because every
   surface in the app reads these tokens, flipping them cascades the whole shell.

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

   Identity decisions:
     • Accent stays the canonical brand blue (#3b82f6) on every theme.
     • Borders flip from white-on-dark (rgba(255,255,255,…)) to ink-on-light
       (rgba(15,23,42,…)) — a white hairline is invisible on a light surface.
     • Shadows drop from the heavy dark-bg alphas (0.45–0.58) to soft ink
       shadows so cards read as lifted, not bruised.
     • Floating editor glass becomes near-opaque WHITE (it floats over the
       already-light canvas), mirroring the calm-theme rationale in reverse.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── EDITOR shell (style.css token names) ─────────────────────────────────── */
body.theme-light {
  --bg-app:        #f4f6fb;
  --bg-sidebar:    #ffffff;
  --bg-toolbar:    #ffffff;
  --bg-card:       #ffffff;
  --bg-card-hover: #eef2f8;
  --bg-modal:      #ffffff;
  --bg-input:      #ffffff;
  /* Canvas stays light (it already was) — leave --bg-canvas at its default. */

  --text-primary:   #1a2230;
  --text-secondary: #55617a;
  --text-muted:     #8a94a8;

  --accent-light: rgba(59, 130, 246, 0.10);
  --accent-glow:  rgba(59, 130, 246, 0.20);
  --accent-soft:  rgba(59, 130, 246, 0.10);
  --accent-edge:  rgba(59, 130, 246, 0.45);

  --border:        rgba(15, 23, 42, 0.10);
  --border-input:  rgba(15, 23, 42, 0.16);
  --border-strong: rgba(15, 23, 42, 0.18);
  --border-focus:  rgba(59, 130, 246, 0.55);

  --surface-hover: #eef2f8;

  /* A white top-edge highlight is invisible on light surfaces — drop it to a
     near-noop so the shadow composites below carry the elevation instead. */
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.16);
}

/* ── EDITOR glass chrome (ui-next.css) — near-opaque white over light canvas ── */
body.theme-light {
  --glass-bg:     rgba(255, 255, 255, 0.92);
  --glass-bg-2:   rgba(248, 250, 253, 0.95);
  --glass-border: rgba(15, 23, 42, 0.10);
  --glass-shadow: 0 10px 34px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --glass-blur:   blur(14px) saturate(120%);
}

/* ── DASHBOARD surfaces (dashboard.css token names) ───────────────────────── */
body.theme-light {
  --bg:           #f4f6fb;
  --surface:      #ffffff;
  --bg-secondary: #ffffff;
  --card:         #ffffff;
  --elev-3:       #eef2f8;

  --text:           #1a2230;

  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-2: 0 8px 24px rgba(15, 23, 42, 0.10);
  --shadow-3: 0 18px 44px rgba(15, 23, 42, 0.16);
  --card-shadow:       var(--shadow-1);
  --card-shadow-hover: var(--shadow-3);

  /* Coloured ambient glows read as muddy halos on white — calm them right down. */
  --glow-blue:   0 0 0 1px rgba(59, 130, 246, 0.18);
  --glow-purple: 0 0 0 1px rgba(139, 92, 246, 0.18);
  --glow-green:  0 0 0 1px rgba(34, 197, 94, 0.18);
  --glow-amber:  0 0 0 1px rgba(245, 158, 11, 0.18);
  --glow-red:    0 0 0 1px rgba(239, 68, 68, 0.18);
}

/* ── LANDING + AUTH pages (index.css / login.css token names) ─────────────── */
body.theme-light {
  /* index.css */
  --bg2:   #ffffff;
  --card2: #f1f4f9;
  --border2: rgba(15, 23, 42, 0.14);
  --text2: #55617a;
  --text3: #8a94a8;
  --grid:        rgba(59, 130, 246, 0.05);
  --grid-strong: rgba(59, 130, 246, 0.10);
  /* login.css */
  --input-bg: #ffffff;
  --card-bg:  #ffffff;
}

/* ── Backdrops / scrims: the editor canvas vignette + dashboard ambient glow
   are tuned for a dark field. On light, drop the dark tints so nothing greys
   out the page behind the panels. ──────────────────────────────────────────── */
body.ui-next.theme-light .canvas-area {
  background-color: #eef1f6;
  background-image:
    radial-gradient(130% 90% at 50% -15%, rgba(59, 130, 246, 0.05), transparent 64%),
    radial-gradient(circle, rgba(80, 95, 130, 0.14) 1px, transparent 1.5px);
}
body.theme-light .dash-layout {
  background:
    radial-gradient(64rem 44rem at 100% -12%, rgba(59, 130, 246, 0.05), transparent 60%),
    var(--bg);
}

/* ── Targeted fixes for components that hardcode white-on-dark instead of
   reading a token. These are the few high-visibility offenders; everything
   else inherits the token flip above. ──────────────────────────────────────── */

/* Invite pages (accept-invite / accept-org-invite) inline a fully dark palette
   in a page <style> (literal body bg, near-white text, white-on-dark meta box).
   None of it reads a token, so pull each piece onto the light palette here. */
body.theme-light { background: #f4f6fb; }   /* override the invite pages' body{background:#0f172a} */
body.theme-light .invite-card {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
}
body.theme-light .invite-title { color: #1a2230; }
body.theme-light .invite-sub   { color: #55617a; }
body.theme-light .invite-meta {
  background: #f4f6fb;
  border: 1px solid var(--border);
}
body.theme-light .invite-meta-label { color: #8a94a8; }
body.theme-light .invite-meta-value { color: #1a2230; }

/* Dashboard rail + sidebar hardcode a dark vertical gradient (it starts at
   #1a1e29, before the --surface token kicks in) — flip both to a clean light
   wash so the nav chrome isn't a dark band beside white content. */
body.theme-light .app-rail,
body.theme-light .sidebar {
  background: linear-gradient(180deg, #ffffff 0%, var(--surface) 60%);
}

/* Missing-thumbnail placeholder behind project cards is a dark gradient; give
   it a light fill so empty cards match the rest of the surface. */
body.theme-light .project-card-thumb {
  background: linear-gradient(135deg, #eef2f8, #e3e9f2);
}

/* ── Top command bar ───────────────────────────────────────────────────────
   The sticky dashboard top bar hardcodes a near-black glass (rgba(11,13,19))
   and its chips/kbd use white-on-dark fills that vanish on a light surface. */
body.theme-light .command-bar {
  background: rgba(255, 255, 255, 0.82);
}
body.theme-light .cmd-stats-chip,
body.theme-light .cmd-kbd {
  background: rgba(15, 23, 42, 0.05);
}

/* ── White-on-dark fills used as VISIBLE elements (not just hover tints) ──── */
body.theme-light .btn-secondary {
  background: rgba(15, 23, 42, 0.05);
}
body.theme-light .btn-secondary:hover {
  background: rgba(15, 23, 42, 0.09);
}
body.theme-light .toggle-slider {
  background: #dfe5ee;
}
body.theme-light .nav-coming-soon,
body.theme-light .user-plan-badge.plan-free {
  background: rgba(15, 23, 42, 0.05);
  border-color: var(--border);
}
body.theme-light .gs-bar-wrap,
body.theme-light .cmd-foot kbd,
body.theme-light .page-btn,
body.theme-light .view-toggle-btn {
  background: rgba(15, 23, 42, 0.05);
}

/* ── Hover tints: a 3–7% white wash is invisible on white — swap to ink ───── */
body.theme-light .nav-item:hover,
body.theme-light .rail-item:hover,
body.theme-light .flyout-item:hover,
body.theme-light .pp-item:hover,
body.theme-light .settings-sidebar-link:hover,
body.theme-light .settings-sidebar-link.active,
body.theme-light .settings-accordion-header:hover,
body.theme-light .btn-sidebar-icon:hover,
body.theme-light .canvas-hero-close:hover,
body.theme-light .page-btn:hover:not(:disabled),
body.theme-light .admin-notif-item:hover,
body.theme-light .admin-tickets-table tr:hover td,
body.theme-light tr:hover td {
  background: rgba(15, 23, 42, 0.05);
}
body.theme-light .sidebar-user:hover {
  background: rgba(15, 23, 42, 0.05) !important;
}

/* Native form controls + scrollbars should follow the light scheme so date
   pickers, dropdown arrows and overflow gutters aren't dark-on-light. */
body.theme-light { color-scheme: light; }