/* ─────────────────────────────────────────────────────────────
   Brighthouse · Contact Current Website Builder 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;
  /* SEMANTIC hues — meaning, not brand. cc-brand.css remaps --orange→pink and
     --yellow→blue on Contact Current surfaces, which collapses any two categories that
     happened to use them into one colour. These names are deliberately NOT remapped, so
     status coding stays legible under either skin. Per the CC colour rule (2026-07-14):
     pink/blue are primary, and when a surface needs MORE accents than two — category
     coding, status badges — it falls back to the Brighthouse accent family. That is
     exactly what these are for. Use them for MEANING; use --pink/--blue for chrome. */
  --warn:#ffeb00;                                   /* caution — mirrors the yellow family */
  --build:#ff7300;                                  /* work in progress — orange family */

  --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;
  --warn-text:#ffe95c;             /* semantic pair — see --warn/--build above */
  --build-text:#ffb066;

  /* 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);
  --warn-a:rgba(255,235,0,.12);  --warn-line:rgba(255,235,0,.45);
  --build-a:rgba(255,115,0,.14); --build-line:rgba(255,115,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 */
  --warn-text:#7d6300;             /* semantic pair — same dark-gold rule on cream */
  --build-text:#a84a00;

  --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);
  --warn-a:rgba(255,235,0,.25);  --warn-line:rgba(200,170,0,.5);
  --build-a:rgba(255,115,0,.12); --build-line:rgba(255,115,0,.45);

  --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}
