/* lucy-bridge.css — HAL and the sign-in page join Lucy's four themes.
 *
 * Lucy already themes itself: liquid-glass.css defines paper / carbon / midnight / studio
 * under [data-theme], and setLucyTheme() in index.html writes that attribute and remembers
 * it in localStorage['lucy-theme'].
 *
 * HAL and login never read any of it — each invented its own palette. This file maps the
 * names they already use onto Lucy's theme tokens, so their existing rules keep working
 * and start following the theme. No page rewrite.
 *
 *     <link rel="stylesheet" href="/static/liquid-glass.css?v=6">   <-- the themes
 *     <link rel="stylesheet" href="/static/lucy-bridge.css?v=1">    <-- this file, after
 *     <script src="/static/js/lucy-theme-boot.js?v=1"></script>     <-- applies the theme
 *
 * Then delete the colour lines from HAL's own :root (keep --ui and --mono), or they win.
 */

:root {
  /* ---- HAL's names, from Lucy's tokens ---------------------------------- */
  --bg1:    var(--bg-primary, #1a1d24);
  --bg2:    var(--bg-primary, #1a1d24);
  --glass:  var(--glass-bg, rgba(255,255,255,.035));
  --glass2: var(--glass-bg-button, rgba(255,255,255,.08));
  --edge:   var(--glass-border, rgba(255,255,255,.1));
  --edge2:  var(--glass-border-hover, rgba(255,255,255,.2));
  --ink:    var(--text-primary, #e7eaf2);
  --muted:  var(--text-secondary, rgba(255,255,255,.6));
  --dim:    var(--text-hint, rgba(255,255,255,.3));

  /* --accent comes from the theme itself — do not redefine it */

  /* HAL's run/step states, from the verification palette Lucy already ships */
  --ok:  var(--verify-ok, #5DBE8A);
  --ask: var(--verify-gold, #D4A843);
  --bad: var(--verify-bad, #E0654E);
  --run: var(--sev-info, #a5b4fc);

  /* HAL's receipt marks: sourced · external · computed · proven · reported */
  --src: var(--verify-calc, #6FA8DC);
  --ext: var(--sev-info, #a5b4fc);
  --cmp: var(--verify-unearned, #9aa4b8);
  --prv: var(--verify-gold, #D4A843);
  --rep: var(--verify-ok, #5DBE8A);

  /* ---- login.html's names ----------------------------------------------- */
  /* --glow-color and --glow-color-hover already come from the theme.
     login also hardcodes #e0e0e0 body text and #1a1d24 background — see below. */
}

/* ---------------------------------------------------------------- HAL page
   HAL paints its own gradient ground with literal navies. Follow the theme
   instead: one wash, tinted by the theme's own glow, over the theme's canvas. */
body.hal, body[data-page="hal"], .hal-page {
  background:
    radial-gradient(1200px 700px at 30% 20%, var(--glow-color, transparent) 0%, transparent 60%),
    radial-gradient(900px 600px at 80% 80%, var(--glow-purple, transparent) 0%, transparent 60%),
    var(--bg-primary, #1a1d24) !important;
  color: var(--text-primary, #e7eaf2);
}

/* HAL's own components, re-pointed. Selectors match workbench.html as it is. */
.glassbtn {
  background: var(--glass-bg-button, var(--glass2));
  border: 1px solid var(--glass-border, var(--edge));
  color: var(--text-primary, var(--ink));
}
.glassbtn:hover { border-color: var(--glass-border-hover, var(--edge2)); }
.primary {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.okbtn {
  background: color-mix(in srgb, var(--verify-ok, #5DBE8A) 18%, transparent);
  border-color: color-mix(in srgb, var(--verify-ok, #5DBE8A) 55%, transparent);
}
select.glassbtn option { background: var(--bg-primary, #1a1d24); color: var(--text-primary); }
.msg.hal { border-left-color: var(--accent); }
.thinking i { background: var(--accent); }

/* ---------------------------------------------------------------- sign-in
   login.html hardcodes its ground and text. Follow the theme. */
body.lucy-auth {
  background: var(--bg-primary, #1a1d24) !important;
  color: var(--text-primary, #e0e0e0);
}
/* .login-container is a bare layout wrapper on the current design — left alone.
   These apply only if a page uses a card. */
body.lucy-auth .glass-card,
body.lucy-auth .login-card {
  background: var(--glass-bg-card, rgba(255,255,255,.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,.1));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
body.lucy-auth a { color: var(--accent); }
body.lucy-auth .subtitle,
body.lucy-auth .hint { color: var(--text-secondary); }
body.lucy-auth .footer,
body.lucy-auth .footnote { color: var(--text-hint); }
body.lucy-auth .title { color: var(--text-primary); }

/* the wordmark ("Lucy" in the greeting): the theme's accent, not a literal blue */
body.lucy-auth .title span,
body.lucy-auth .brand-name,
body.lucy-auth .wordmark { color: var(--accent); }

/* the butterfly outline */
body.lucy-auth .butterfly path,
body.lucy-auth .butterfly g path { stroke: var(--text-hint); }

/* Google's button keeps its own mark, but sits on the theme's surface */
body.lucy-auth .google-btn {
  background: var(--glass-bg-button, rgba(255,255,255,.08));
  border: 1px solid var(--glass-border, rgba(255,255,255,.1));
  color: var(--text-primary);
}
body.lucy-auth .google-btn:hover {
  background: var(--glass-bg-hover, rgba(255,255,255,.12));
  border-color: var(--glass-border-hover, rgba(255,255,255,.2));
}

/* the butterfly glow, from the theme rather than a fixed blue */
body.lucy-auth .butterfly-container::before,
body.lucy-auth .butterfly-glow,
body.lucy-auth .logo-glow {
  background: radial-gradient(circle, var(--glow-color-strong, var(--glow-color)) 0%, transparent 70%);
}

/* ---------------------------------------------------------------- light themes
   paper and studio need a little more edge definition than the dark two. */
[data-theme="paper"] .glassbtn,
[data-theme="studio"] .glassbtn { box-shadow: 0 1px 2px rgba(16,24,40,.06); }
[data-theme="paper"] .msg,
[data-theme="studio"] .msg { border-left-color: var(--glass-border-strong, rgba(0,0,0,.18)); }

/* ---------------------------------------------------------------- switcher
   Same control as Lucy's, usable on any page. */
.theme-switcher { display: flex; gap: 6px; }
.theme-btn {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid rgba(128,128,128,.35);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.theme-btn:hover { transform: scale(1.08); }
.theme-btn.active {
  border-color: var(--text-primary, #fff);
  box-shadow: 0 0 0 3px var(--glass-border-strong, rgba(0,0,0,.15));
}