/* ═══════════════════════════════════════════════════════════════════════
   LegalCollect — Light theme
   Shared, additive layer. The site's default (dark) styling lives inline in
   each page and is never modified; these rules only take effect when the
   root carries data-theme="light". Selectors that don't exist on a given
   page simply no-op, so this one file is a superset for the whole site.

   Text accents (--green-2 / --teal-2) are darkened for WCAG AA contrast on
   light backgrounds; brand hues stay untouched for fills, gradients and
   decorative accents.
   ═══════════════════════════════════════════════════════════════════════ */

/* Native controls / scrollbars follow the active theme */
:root[data-theme="dark"]  { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* ── Token overrides ───────────────────────────────────────────────────── */
:root[data-theme="light"] {
  --bg:      #F4F7FB;
  --bg-2:    #FFFFFF;
  --ink:     #13344F;
  --muted:   #47607D;
  --faint:   #7A8CA5;
  --line:        rgba(19,52,79,0.10);
  --line-strong: rgba(19,52,79,0.20);
  --shadow-lg: 0 24px 60px rgba(19,52,79,0.14);
  /* Darkened text-accent variants for contrast on light */
  --green-2: #5D8A21;
  --teal-2:  #007A67;
  /* Release-note status text colours (darkened for light bg) */
  --c-security: #B45309;
  --c-improved: #2563EB;
  --c-fixed:    #47607D;
  /* Resolves to green (#5D8A21) on green pages, teal (#007A67) on teal pages */
  --c-new:      var(--accent-2);
}

/* ── Selection ─────────────────────────────────────────────────────────── */
[data-theme="light"] ::selection { background: rgba(0,184,156,0.22); color: #13344F; }

/* ── Ambient background ────────────────────────────────────────────────── */
[data-theme="light"] .ambient {
  background:
    radial-gradient(1100px 700px at 78% -10%, rgba(19,52,79,0.07), transparent 60%),
    radial-gradient(900px 620px at -10% 24%, rgba(124,177,47,0.08), transparent 55%),
    radial-gradient(760px 560px at 94% 80%, rgba(0,184,156,0.07), transparent 60%),
    var(--bg);
}
[data-theme="light"] .ambient::after {
  background-image:
    linear-gradient(rgba(19,52,79,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19,52,79,0.055) 1px, transparent 1px);
}
[data-theme="light"] .orb-a { background: radial-gradient(circle at 35% 35%, rgba(124,177,47,0.16), transparent 68%); }
[data-theme="light"] .orb-b { background: radial-gradient(circle at 50% 50%, rgba(0,184,156,0.14), transparent 70%); }

/* ── Nav + dropdown ────────────────────────────────────────────────────── */
[data-theme="light"] nav.scrolled { background: rgba(255,255,255,0.82); }
[data-theme="light"] .dd-panel { background: rgba(255,255,255,0.97); box-shadow: 0 24px 60px rgba(19,52,79,0.18); }
[data-theme="light"] .dd-col a:hover { background: rgba(19,52,79,0.06); }

/* ── Type + buttons ────────────────────────────────────────────────────── */
[data-theme="light"] .grad-text {
  background: linear-gradient(96deg, #679A24 0%, #00907A 55%, #0284C7 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
[data-theme="light"] .hero-trust svg { stroke: #00907A; }
[data-theme="light"] .btn-primary { box-shadow: 0 10px 30px rgba(0,184,156,0.35); }
[data-theme="light"] .btn-ghost { background: #FFFFFF; }
[data-theme="light"] .btn-ghost:hover { background: #F0FAF8; }

/* ── Dark gradient cards → flat white (all pages) ───────────────────────────
   Every surface using the linear-gradient(175deg, rgba(19,42,68…),
   rgba(8,18,34…)) family, by its real per-page class name. */
[data-theme="light"] .pcard,          /* index */
[data-theme="light"] .cap,            /* actionstep-mcp, urbanise */
[data-theme="light"] .e,              /* actionstep-mcp, urbanise */
[data-theme="light"] .feat,           /* legalcollect */
[data-theme="light"] .step,           /* legalcollect */
[data-theme="light"] .steps li,       /* feature, setup */
[data-theme="light"] .ticks li,       /* feature, setup */
[data-theme="light"] .more-grid a,    /* feature "more" links */
[data-theme="light"] .tool,           /* user-guide */
[data-theme="light"] .gtk,            /* user-guide */
[data-theme="light"] .qa .item,       /* setup */
[data-theme="light"] .res,            /* actionstep-mcp resources */
[data-theme="light"] .earlier .box {  /* legalcollect-release-notes */
  background: linear-gradient(175deg, #FFFFFF, #FAFCFE);
  box-shadow: 0 6px 24px rgba(19,52,79,0.06);
}
[data-theme="light"] .pcard:hover { box-shadow: 0 24px 60px rgba(19,52,79,0.16); }
[data-theme="light"] .pcard .icon { background: rgba(19,52,79,0.045); }

/* ── Bands / strips (marquee, about, trust) ────────────────────────────── */
[data-theme="light"] .works,
[data-theme="light"] .about,
[data-theme="light"] .trust-band { background: rgba(255,255,255,0.65); }
[data-theme="light"] .m-item svg { filter: brightness(0.72) saturate(1.25); }

/* Chat composer / input bar inside mock frames */
[data-theme="light"] .chat-input { background: #F6F9FC; }

/* ── Mock / chat frames (chat, tables, activity rows) ──────────────────── */
[data-theme="light"] .mock,
[data-theme="light"] .chat { background: #FFFFFF; box-shadow: 0 18px 50px rgba(19,52,79,0.12); }
[data-theme="light"] .mock-bar .dots i { background: rgba(19,52,79,0.16); }
[data-theme="light"] .mock-row,
[data-theme="light"] .mock-stat > div,
[data-theme="light"] .paybtn-demo { background: #F6F9FC; }
/* Chat bubbles across index (.mock .bubble-*), urbanise (.bubble-*),
   actionstep-mcp (.msg.user/.msg.ai) — mint text → deep teal */
[data-theme="light"] .mock .bubble-user,
[data-theme="light"] .bubble-user,
[data-theme="light"] .msg.user { background: rgba(0,184,156,0.10); border-color: rgba(0,150,128,0.35); color: #0A4A3E; }
[data-theme="light"] .mock .bubble-ai,
[data-theme="light"] .bubble-ai,
[data-theme="light"] .msg.ai { background: #F3F6FA; }

/* ── Bento grid ────────────────────────────────────────────────────────── */
[data-theme="light"] .b { background: #FFFFFF; box-shadow: 0 4px 18px rgba(19,52,79,0.05); }
[data-theme="light"] .b:hover { border-color: rgba(0,144,122,0.45); }
[data-theme="light"] .b .icon { background: rgba(0,184,156,0.08); }

/* ── CTA / glow boxes (cta, thanks .card, doc next-steps, callout boxes) ── */
[data-theme="light"] .cta-box {
  background:
    radial-gradient(700px 340px at 30% -20%, rgba(124,177,47,0.10), transparent 68%),
    radial-gradient(700px 340px at 75% -20%, rgba(0,184,156,0.10), transparent 68%),
    linear-gradient(175deg, #FFFFFF, #F7FAFD);
  box-shadow: 0 20px 60px rgba(19,52,79,0.08);
}
[data-theme="light"] .card,        /* thanks-* */
[data-theme="light"] .callout-box, /* legalcollect */
[data-theme="light"] .next-box {   /* setup, user-guide */
  background:
    radial-gradient(600px 300px at 50% -20%, rgba(124,177,47,0.10), transparent 68%),
    linear-gradient(175deg, #FFFFFF, #F7FAFD);
  box-shadow: 0 20px 60px rgba(19,52,79,0.08);
}

/* ── Footer ────────────────────────────────────────────────────────────── */
[data-theme="light"] footer { background: rgba(255,255,255,0.7); }

/* ═══ Page-specific surfaces ═══════════════════════════════════════════════ */

/* ── Forms (book-a-demo, urbanise waitlist) ─────────────────────────────────
   :root prefix raises specificity to beat page rules like `.wl-form input`
   (which would otherwise tie and win on source order). */
[data-theme="light"] .form-card,
[data-theme="light"] .wl-form {
  background: #FFFFFF;
  box-shadow: 0 18px 50px rgba(19,52,79,0.10);
}
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
  /* background-color (not the shorthand) so the custom select chevron's
     repeat/position from the page rule survive */
  background-color: #FFFFFF; color: var(--ink);
  border-color: var(--line-strong);
}
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder { color: var(--faint); }
:root[data-theme="light"] input:focus,
:root[data-theme="light"] select:focus,
:root[data-theme="light"] textarea:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(124,177,47,0.18);
}
:root[data-theme="light"] select option { background: #FFFFFF; color: var(--ink); }
/* Re-issue the custom select chevron with a navy stroke for light bg */
:root[data-theme="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2347607D' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ── Code blocks (feature pages) ───────────────────────────────────────────
   Kept intentionally dark: the code text is hardcoded terminal-green
   (#B7E38A), so a light panel would be unreadable. Treated as a "console"
   inset within the light UI. */
[data-theme="light"] pre {
  background: #0E1A2B;
  border-color: rgba(19,52,79,0.35);
}

/* ── Callouts ──────────────────────────────────────────────────────────── */
[data-theme="light"] .callout {
  background: #F5FAF8;
  border-color: rgba(0,144,122,0.35);
}

/* ── Release-note timeline + status chips ──────────────────────────────── */
[data-theme="light"] .entry { border-left-color: var(--line-strong); }
[data-theme="light"] .entry::before {
  background: var(--bg-2);
  border-color: var(--accent-2);
}
[data-theme="light"] .chip.security { color: var(--c-security); }
[data-theme="light"] .chip.improved { color: var(--c-improved); }
[data-theme="light"] .chip.fixed    { color: var(--c-fixed); }
/* .chip.new keeps the page's accent-driven colour */

/* ── Tool tags (user guide) — keep three distinct hues; .create stays teal
      via its var(--teal-2), only the two blues need darkening. ── */
[data-theme="light"] .tag.look   { color: #0369A1; }
[data-theme="light"] .tag.update { color: #1D4ED8; }

/* ── Pills / badges ────────────────────────────────────────────────────── */
[data-theme="light"] .pill.warn { color: #B45309; }
[data-theme="light"] .pill.ok   { color: var(--green-2); }
[data-theme="light"] .pill.info,
[data-theme="light"] .pill.t    { color: var(--teal-2); }

/* ── Feature-page card gradients + ticks are added in Batch 3, once the
      real class names on feature-*.html are confirmed. ── */

/* ═══ Logo swap ════════════════════════════════════════════════════════════
   Pages carry both logos; CSS shows the one that suits the active theme. */
.logo-for-light { display: none; }
[data-theme="light"] .logo-for-light { display: block; }
[data-theme="light"] .logo-for-dark  { display: none; }

/* ═══ Theme toggle (compact icon button) ═══════════════════════════════════ */
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  border-radius: 10px; cursor: pointer;
  background: rgba(147,165,196,0.1);
  border: 1px solid var(--line-strong);
  color: var(--muted);
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
[data-theme="light"] .theme-btn { background: rgba(19,52,79,0.05); }
.theme-btn:hover { color: var(--ink); border-color: var(--accent-2); }
.theme-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
/* Show sun in dark mode (offer light), moon in light mode (offer dark) */
.theme-btn .icon-sun  { display: block; }
.theme-btn .icon-moon { display: none; }
[data-theme="light"] .theme-btn .icon-sun  { display: none; }
[data-theme="light"] .theme-btn .icon-moon { display: block; }