/* EigenMap AI — theme tokens.
   Shared by index, upgrade, sign-in and sign-up so the palette cannot drift
   between pages.

   `vibrant` is the default and carries production's exact palette: a visitor
   who never touches the toggle sees precisely the page that was live before
   themes existed. Colours are declared as channel triplets because the page
   CSS leans on translucent washes — `rgb(var(--fg-rgb) / 0.07)` renders
   identically to the `rgba(180,255,0,0.07)` it replaced.

   `light` and `dark` are the Appalore palettes as used on
   appalore.com/eigenmapai — the eigenmap platform accents (azure + gold) over
   Appalore's neutral ladder, taken from alt-ui/css/site.css.

   Roles, consistent across all three themes:

     --fg          primary / free tier      --gold        premium tier
     --cyan        basic tier               --purple      supporting accent
     --fg-hover    brighter primary         --accent-ink  text ON an accent
     --ink-strong  headings and emphasis    --text        body copy
     --ink-2/3     secondary, tertiary      --muted       muted copy
     --ink-4/5     faint chips, footnotes   --danger      error text

   --accent-ink is the one that bites: on vibrant the accents are bright lime
   and gold, so text on them must be black. On light they are deep azure, so it
   must be white. Hard-coding #000 or #fff anywhere is what broke the light
   theme the first time round.
*/

:root,
:root[data-theme="vibrant"] {
  --fg-rgb:        180 255 0;
  --cyan-rgb:        0 212 255;
  --purple-rgb:    139 92 246;
  --gold-rgb:      255 215 0;
  --bg-rgb:          7 7 15;
  /* Overlay ink. On a dark ground the washes lighten. */
  --surface-rgb:   255 255 255;
  --shadow-rgb:      0 0 0;
  /* Hero canvas only: inactive edges and non-eigen nodes. */
  --edge-cold-rgb:  80 100 120;
  /* The quiet nodes carry two tones so the network reads as structure
     rather than speckle. Vibrant uses one value for both, which is what
     it always drew. */
  --node-dim:      #2a3040;
  --node-dim-2:    #2a3040;

  --fg-hover:      #caff40;
  --accent-ink:    #000000;
  --bg2:           #0e0e1a;
  --ink-strong:    #ffffff;
  --text:          #f0f0f0;
  --ink-2:         #dddddd;
  --ink-3:         #bbbbbb;
  --muted:         #aaaaaa;
  --ink-4:         #888888;
  --ink-5:         #666666;
  --danger:        #ff8080;
  /* Chart series. The pre-rendered application pages bake figure colours in
     at build time; the page script re-maps them through these at draw time, so
     a chart stays readable when the ground turns white. Vibrant's values are
     the originals the figures were authored with. */
  --chart-grid:    rgba(255, 255, 255, 0.08);
  --chart-axis:    rgba(255, 255, 255, 0.18);
  --s-lime:        #b4ff00;
  --s-lime-2:      #caff40;
  --s-cyan:        #00d4ff;
  --s-gold:        #ffd700;
  --s-purple:      #9d4edd;
  --s-red:         #ff6b6b;
  --s-pink:        #ffafcc;
  --s-orange:      #ff8c42;
  --s-sand:        #f4a261;
  --s-mint:        #a0e8af;
  --s-aqua:        #80ffea;
  --s-mid:         #1a1a1a;
  color-scheme: dark;
}

/* Appalore dark — eigenmap platform: azure #5b9dff + gold #e0b169 over the
   neutral ladder (bg #08080b, ink #f4f4f6, ink-2 #a9a9b6, ink-3 #74747f). */
:root[data-theme="dark"] {
  --fg-rgb:         91 157 255;
  --cyan-rgb:       45 212 191;
  --purple-rgb:    192 132 252;
  --gold-rgb:      224 177 105;
  --bg-rgb:          8 8 11;
  --surface-rgb:   255 255 255;
  --shadow-rgb:      0 0 0;
  --edge-cold-rgb:  70 78 96;
  /* Cool and warm at the same lightness as the grey they replace. */
  --node-dim:      #414a5e;
  --node-dim-2:    #554d41;

  --fg-hover:      #8fbaff;
  /* Accents are light here, so text on them is near-black. */
  --accent-ink:    #0a0a10;
  --bg2:           #0e0e13;
  --ink-strong:    #ffffff;
  --text:          #f4f4f6;
  --ink-2:         #d4d4dc;
  --ink-3:         #b9b9c4;
  --muted:         #a9a9b6;
  /* Appalore's ink-3 is #74747f, which lands at 4.33:1 here — just under AA
     both as footnote text and as the ground for a badge label. Nudged up. */
  --ink-4:         #80808b;
  --ink-5:         #80808b;
  --danger:        #fca5a5;
  /* Chart series — anchored on azure rather than lime, and kept to eleven
     separable hues so a multi-line chart stays readable. */
  --chart-grid:    rgba(255, 255, 255, 0.09);
  --chart-axis:    rgba(255, 255, 255, 0.20);
  --s-lime:        #5b9dff;
  --s-lime-2:      #8fbaff;
  --s-cyan:        #2dd4bf;
  --s-gold:        #e0b169;
  --s-purple:      #c084fc;
  --s-red:         #fca5a5;
  --s-pink:        #f0a6c8;
  --s-orange:      #fb923c;
  --s-sand:        #d9a066;
  --s-mint:        #86efac;
  --s-aqua:        #67e8f9;
  --s-mid:         #14141a;
  color-scheme: dark;
}

/* Appalore light — eigenmap platform: azure #1d5fd0 + gold #8a6111 over
   bg #ffffff, surface-1 #f7f7fa, ink #0d0d12, ink-2 #4b4b58, ink-3 #70707e. */
:root[data-theme="light"] {
  --fg-rgb:         29 95 208;
  --cyan-rgb:       11 122 109;
  --purple-rgb:    139 47 214;
  --gold-rgb:      138 97 17;
  --bg-rgb:        255 255 255;
  /* Inverted: on a light ground the washes have to darken, not lighten, or
     every translucent surface disappears into the background. */
  --surface-rgb:    13 13 18;
  --shadow-rgb:     15 15 25;
  --edge-cold-rgb: 124 154 204;
  /* Azure and gold off the platform accents. The grey these replace was
     the right lightness and the wrong idea: on white, neutral specks at
     two pixels look like dirt on the screen. */
  --node-dim:      #6d92cf;
  --node-dim-2:    #b08a3a;

  --fg-hover:      #174fae;
  /* Accents are deep here, so text on them is white. */
  --accent-ink:    #ffffff;
  --bg2:           #f7f7fa;
  --ink-strong:    #0d0d12;
  --text:          #0d0d12;
  --ink-2:         #2f2f3a;
  --ink-3:         #4b4b58;
  --muted:         #4b4b58;
  --ink-4:         #70707e;
  --ink-5:         #70707e;
  --danger:        #b91c1c;
  /* Chart series — the same eleven hues taken dark enough to read as lines on
     white. Lime and gold in particular are invisible here at their vibrant
     values, which is exactly the failure this mapping exists to prevent. */
  --chart-grid:    rgba(13, 13, 18, 0.10);
  --chart-axis:    rgba(13, 13, 18, 0.22);
  --s-lime:        #1d5fd0;
  --s-lime-2:      #174fae;
  --s-cyan:        #0b7a6d;
  --s-gold:        #8a6111;
  --s-purple:      #8b2fd6;
  --s-red:         #c62828;
  --s-pink:        #ad1457;
  --s-orange:      #b45309;
  --s-sand:        #8a5a1a;
  --s-mint:        #1b7a4b;
  --s-aqua:        #0e6f78;
  --s-mid:         #f0f0f2;
  color-scheme: light;
}

/* Derived once. Each resolves against whichever theme block won above,
   because custom properties are substituted where they are used. */
:root {
  --fg:     rgb(var(--fg-rgb));
  --cyan:   rgb(var(--cyan-rgb));
  --purple: rgb(var(--purple-rgb));
  --gold:   rgb(var(--gold-rgb));
  --bg:     rgb(var(--bg-rgb));
}

/* ── The switcher ─────────────────────────────────────────────────────────
   Built by theme.js into any element carrying [data-theme-slot], so pages
   that have no nav (sign-in, sign-up) simply inherit the remembered theme
   without offering a control.
*/
.theme-btn {
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgb(var(--surface-rgb) / 0.05);
  border: 1px solid rgb(var(--surface-rgb) / 0.12);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.theme-btn:hover {
  color: var(--fg);
  border-color: rgb(var(--fg-rgb) / 0.4);
  background: rgb(var(--fg-rgb) / 0.06);
}

.theme-btn:focus-visible {
  outline: 2px solid rgb(var(--fg-rgb) / 0.6);
  outline-offset: 2px;
}