/* ─────────────────────────────────────────────────────────────
   Brighthouse · Fuse design tokens — single source of truth.
   Linked BEFORE each page's inline <style> so page rules keep
   cascade priority. Dark is default; light via
   <html data-theme="light"> (persisted in localStorage 'fuse-theme').
   Palette locked per Brand Guide (Colors & Fonts) 2026-06-08.
   ───────────────────────────────────────────────────────────── */
:root{
  /* accents — the ONLY 6 brand colors (identical in both themes) */
  --yellow:#ffeb00;
  --orange:#ff7300;
  --red:#f80303;
  --pink:#ff007f;
  --blue:#0061ef;
  --green:#33bb22;
  --grad:linear-gradient(135deg,#ff7300,#ffeb00);   /* sunrise — primary actions */
  --send:linear-gradient(135deg,#ff007f,#0061ef);   /* AI accent — editor send only */

  /* type */
  --head:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Inter",system-ui,Arial;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;  /* code + IDs only */

  /* radii */
  --r-card:14px;
  --r-btn:10px;

  /* ── DARK (default) ── */
  --bg:#0a0a0a;
  --bg-2:#111111;
  --surface:rgba(20,20,20,.85);
  --surface-hover:rgba(30,30,30,.9);
  --overlay:#16161a;               /* solid — floating menus/popovers/toasts */
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.12);
  --ink:#f5f5f5;
  --ink-2:#a0a0a0;
  --ink-3:#82828a;                 /* AA (≥4.5:1) on --bg */

  /* readable accent text — AA on --bg/--surface in this theme */
  --blue-text:#7fb0ff;
  --orange-text:#ffb066;
  --red-text:#ff8a7a;
  --green-text:#7de86b;
  --pink-text:#ff7fb8;
  --yellow-text:#ffe95c;

  /* accent tints — badge/label backgrounds + borders */
  --blue-a:rgba(0,97,239,.14);   --blue-line:rgba(0,97,239,.45);
  --orange-a:rgba(255,115,0,.14);--orange-line:rgba(255,115,0,.45);
  --red-a:rgba(248,3,3,.12);     --red-line:rgba(248,3,3,.45);
  --green-a:rgba(51,187,34,.14); --green-line:rgba(51,187,34,.45);
  --pink-a:rgba(255,0,127,.14);  --pink-line:rgba(255,0,127,.45);
  --yellow-a:rgba(255,235,0,.12);--yellow-line:rgba(255,235,0,.45);

  /* login-gate backdrop */
  --gate-1:#16140f;
  --gate-2:#09090b;
  color-scheme:dark;
}

:root[data-theme="light"]{
  --bg:#faf9f6;
  --bg-2:#f2f1ec;
  --surface:rgba(255,255,255,.9);
  --surface-hover:#ffffff;
  --overlay:#ffffff;
  --line:rgba(0,0,0,.08);
  --line-2:rgba(0,0,0,.14);
  --ink:#1a1a1d;
  --ink-2:#55555a;
  --ink-3:#68686f;                 /* AA (≥4.5:1) on cream --bg AND --bg-2 */

  --blue-text:#0053cc;
  --orange-text:#a84a00;
  --red-text:#c40202;
  --green-text:#1d7a12;
  --pink-text:#cc0060;
  --yellow-text:#7d6300;           /* yellow is never text on cream — dark gold instead */

  --blue-a:rgba(0,97,239,.10);   --blue-line:rgba(0,97,239,.40);
  --orange-a:rgba(255,115,0,.12);--orange-line:rgba(255,115,0,.45);
  --red-a:rgba(248,3,3,.08);     --red-line:rgba(248,3,3,.40);
  --green-a:rgba(51,187,34,.12); --green-line:rgba(51,187,34,.45);
  --pink-a:rgba(255,0,127,.10);  --pink-line:rgba(255,0,127,.40);
  --yellow-a:rgba(255,235,0,.25);--yellow-line:rgba(200,170,0,.5);

  --gate-1:#fffbee;
  --gate-2:#eeece4;
  color-scheme:light;
}

/* ── shared base — :where() keeps specificity at 0 so page CSS always wins ── */
:where(h1,h2,h3,h4,h5){font-family:var(--head)}
:where(button,a,input,textarea,select,summary,[tabindex]):focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* theme toggle button — both consoles + reset */
.themebtn{width:32px;height:32px;border:0;border-radius:9px;background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;flex:0 0 auto}
.themebtn:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.themebtn svg{width:16px;height:16px}

/* login-gate shell — shared by the admin JS-injected gates + reset page
   (editor keeps its richer .logingate/.loginbox, built from the same tokens) */
.gate{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 28%,var(--gate-1),var(--gate-2))}
.gate-card{width:min(380px,90vw);background:var(--surface);backdrop-filter:blur(24px);border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.45),inset 0 0 0 1px var(--line);padding:32px 28px;text-align:center}
.gate-input{width:100%;background:#0000;border:0;box-shadow:inset 0 0 0 1px var(--line-2);border-radius:10px;color:var(--ink);font:inherit;font-size:15px;padding:12px 14px;text-align:center;box-sizing:border-box}
.gate-input:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--orange)}

/* ~150ms cross-fade on theme flip. theme.js adds .theme-anim TRANSIENTLY
   (only for ~220ms around a flip) so normal interactions never inherit
   this transition; :where() = zero specificity so page CSS always wins. */
html.theme-anim :where(body,body *){transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,fill .15s ease}
