/* Family HQ design tokens. One file for every app in the family group.
   Usage: <html data-theme="midnight|reef|forest|space"> and var(--token) in CSS.
   Person colours change per theme so they always sit well on the background. */

:root, html[data-theme="midnight"] {
  --bg: #0B0B0E;
  --bar: #101015;
  --panel: #14141A;
  --panel2: #1A1A22;
  --line: #23232C;
  --line2: #2A2A35;
  --line3: #3A3A48;
  --fg: #EDEDF2;
  --muted: #8E8E9C;
  --soft: #B8B8C4;
  --appbg: #0B0B0E;
  --grid: #1E1E27;
  --node: #121217;
  --ringbg: #15151B;
  --evbg: rgba(11,11,14,.88);
  --cardglow: rgba(62,155,255,.2);
  --path1: #33333F;
  --path2: #55556B;
  --mini: #3A3A4A;
  --c-james: #3E9BFF;
  --c-rachel: #B26BFF;
  --c-georgia: #FF3DA5;
  --c-livia: #2EF2A0;
  --c-xavier: #FF8A1F;
  --c-family: #EDEDF2;
  --c-link: #FFD84D;
}

html[data-theme="reef"] {
  --bg: #04141F;
  --bar: #061C2B;
  --panel: #0A2A3E;
  --panel2: #0F3550;
  --line: #0F344B;
  --line2: #17496A;
  --line3: #2A6C8F;
  --fg: #E6F8FF;
  --muted: #7FAFC6;
  --soft: #B5DCEC;
  --appbg: radial-gradient(90% 55% at 50% -18%,#0A3A54 0%,#052133 38%,#02101A 72%,#010609 100%);
  --grid: #124462;
  --node: #082638;
  --ringbg: #0A2F45;
  --evbg: rgba(4,20,31,.85);
  --cardglow: rgba(46,200,255,.25);
  --path1: #1F5575;
  --path2: #5FB3D6;
  --mini: #2A6C8F;
  --c-james: #2EC8FF;
  --c-rachel: #A58BFF;
  --c-georgia: #FF5FA8;
  --c-livia: #3DF5B0;
  --c-xavier: #FF8A5B;
  --c-family: #E6F8FF;
  --c-link: #FFE27A;
}

html[data-theme="forest"] {
  --bg: #060C08;
  --bar: #09140E;
  --panel: #0F1D15;
  --panel2: #15291D;
  --line: #1A3024;
  --line2: #23412F;
  --line3: #37604A;
  --fg: #EEF5E8;
  --muted: #8FAA98;
  --soft: #BDD2C3;
  --appbg: radial-gradient(75% 55% at 82% -8%,#1F3F2E 0%,#0D1B14 45%,#050A07 100%);
  --grid: #17301F;
  --node: #0B1A12;
  --ringbg: #10241A;
  --evbg: rgba(6,12,8,.86);
  --cardglow: rgba(140,255,107,.22);
  --path1: #2A4A38;
  --path2: #7FB894;
  --mini: #37604A;
  --c-james: #6CC8F0;
  --c-rachel: #B48CFF;
  --c-georgia: #FF7BA5;
  --c-livia: #8CFF6B;
  --c-xavier: #FFB347;
  --c-family: #EEF5E8;
  --c-link: #FFE9A8;
}

html[data-theme="space"] {
  --bg: #02030A;
  --bar: #070A18;
  --panel: #0C1126;
  --panel2: #121936;
  --line: #151C3D;
  --line2: #222C5C;
  --line3: #3A4A8F;
  --fg: #EAF0FF;
  --muted: #8C98C4;
  --soft: #BAC4E6;
  --appbg: radial-gradient(100% 70% at 50% 50%,#0A1033 0%,#03051A 55%,#010208 100%);
  --grid: #0E1533;
  --node: #080C20;
  --ringbg: #0B1130;
  --evbg: rgba(3,5,16,.86);
  --cardglow: rgba(77,163,255,.25);
  --path1: #28336B;
  --path2: #7F92E0;
  --mini: #3A4A8F;
  --c-james: #4DA3FF;
  --c-rachel: #A56BFF;
  --c-georgia: #FF59C8;
  --c-livia: #3DFFC8;
  --c-xavier: #FFA84D;
  --c-family: #EAF0FF;
  --c-link: #FFF08A;
}

/* Shared (not per theme) */
:root{
  --font-display:'Unbounded','Arial Black',sans-serif;
  --font-body:'Instrument Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --ring-w:2px; --ring-w-active:3px;
  --radius-card:18px; --radius-pill:999px; --tap:44px;
}
/* Person ring: <span class="hq-ring" style="--col:var(--c-georgia)">G</span> */
.hq-ring{width:46px;height:46px;box-sizing:border-box;border-radius:50%;border:var(--ring-w) solid var(--col);color:var(--col);background:var(--ringbg);display:inline-flex;align-items:center;justify-content:center;font:500 15px var(--font-display);box-shadow:0 0 16px color-mix(in srgb,var(--col) 60%,transparent)}
.hq-ring.active{border-width:var(--ring-w-active)}
/* Attention glow: set --k from 0 (quiet) to 1 (needs you now) on a tile */
.hq-tile{--k:.2;background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius-card);box-shadow:0 0 calc(6px + 26px*var(--k)) color-mix(in srgb,var(--col,var(--fg)) calc(10% + 40%*var(--k)),transparent)}
/* Reduced motion is applied by hq-motion.js as html[data-rm="1"] (see app.css), from the person's setting and their device. */