/* ============================================================================
   PALETTE — the single source of colour for markdalton.com
   Written 2026-08-09 on Mark's instruction: "make a css of the coloring",
   following "adjust the shading of markdalton.com to match the shading and
   colors used on ai.markdalton.com".

   WHY THIS FILE EXISTS. Before it, the palette was copy-pasted into nearly
   every page: seven pages carried their own private <style> block, two shared
   a stylesheet, blog.html was pinned to an OLDER copy of that stylesheet, and
   defense.html had its own file. There was no single value to change.

   THE PROOF THAT MATTERS: router.html had already drifted on its own to
   --bg:#0a0b0c, a grey, while every other page sat at #030e12, a blue. Nobody
   decided that. It happened because nothing kept them in sync. That is what
   copy-pasted colour does given a month, and it is the reason this file is a
   consolidation rather than a repaint.

   THE VALUES ARE THE BOARD'S, NOT NEW ONES. Every colour below is lifted from
   ai.markdalton.com's own :root, so "matching" is literal rather than
   approximate. Do not hand-tune them here to taste — if the board moves, this
   file follows it, and that direction is the whole point.

   HOW TO USE IT. Load this BEFORE any page or component stylesheet:

       <link rel="stylesheet" href="/assets/palette.css">

   Then delete the duplicated :root block from the page. A page that still
   defines its own --bg will silently win over this file and quietly drift
   again, which is the exact failure this replaces.

   NOTE FOR WHOEVER WIRES THIS IN: server.py holds a STATIC map that is READ AT
   IMPORT. Adding the file to disk is not enough — the entry has to be added
   and the service restarted, or this 404s and every page loses its colour at
   once. Preview on a throwaway static server first.
   ========================================================================= */

:root {
  /* ##########################################################################
     RE-POINTED AT THE HOMEPAGE, 2026-08-19. Mark, twice: "the site STILL
     doesn't match the home page in color and style."

     WHAT WAS ACTUALLY WRONG, because it was not sloppiness and the old values
     were not mistakes. This file was written on 2026-08-09 to match THE BOARD
     at ai.markdalton.com — blue near-black, blue-white ink, amber accent — and
     it did that correctly for ten days. Then the marketing homepage was
     rebuilt onto assets/home/style.e3491ec0.css, a NEUTRAL system: pure black
     ground, true white ink, an icy-blue accent, InterVar and a real mono
     stack. Nothing moved this file with it.

     So the site was running two complete design systems at once — the
     homepage on one, the other ten pages on this. Measured 2026-08-19 by
     rendering all eleven pages and reading their computed custom properties:
     body background rgb(0,0,0) on "/" against rgb(2,6,13) everywhere else,
     --ink #ffffff against #d5efff, and no --accent token on this side at all.
     That seam is what he kept seeing every time he clicked off the homepage.

     THE HOMEPAGE WINS, and that is the decision, not a coincidence of which
     file was edited last: it is the newer system and it is the look he
     approved. Every value below is now lifted from style.e3491ec0.css's own
     :root, so "matching" is literal rather than approximate — which is exactly
     the discipline the original header above demanded, just pointed at a
     different source of truth.

     THE ORIGINAL RULE STILL STANDS AND MATTERS MORE NOW: do not hand-tune
     these to taste on a page. If the homepage moves, this file follows it. A
     page that defines its own --bg silently wins over this file and drifts
     again, which is the failure this whole file replaced.
     ###################################################################### */

  /* --- ground, darkest to lightest --------------------------------------
     Was #02060d/#0b1a22/#12242e — the board's blue near-blacks. Now the
     homepage's neutrals. --black is added because the homepage names the
     page ground separately and ten pages had no token for it at all. */
  --black:      #000000;
  --bg:         #000000;
  --bg-2:       #050509;
  --bg-3:       #08090d;
  --panel:      #050509;

  /* --- text, brightest to faintest -------------------------------------
     --ink WAS #d5efff, a blue-white. The homepage sets true white, and side
     by side the blue cast is the most visible half of the mismatch after the
     ground itself. --ink-ghost is added; the homepage leans on it for the
     faintest marks and nothing here had a fourth step. */
  --ink-bright: #ffffff;
  --ink:        #ffffff;
  --ink-read:   #b0b0b0;
  --ink-dim:    #9aa0a8;
  --ink-faint:  #5c6169;
  --ink-ghost:  #34373c;

  /* --- the blue that means "this is live" ------------------------------
     --signal and --accent are now the SAME colour and that is deliberate:
     the site called it signal, the homepage calls it accent, and having two
     names for one idea at two slightly different hexes is how a palette
     drifts. Both are kept so nothing referencing either name breaks. */
  --signal:     #8fd0e8;
  --accent:     #8fd0e8;
  --accent-dim: #4d7688;

  /* --- rules and edges --------------------------------------------------
     Were tinted with the old blue-white ink (213,239,255). Neutral white now,
     at the homepage's own two weights. */
  --line:       rgba(255,255,255,.09);
  --line-bright:rgba(255,255,255,.18);
  --line-edge:  rgba(255,255,255,.18);
  --line-ui:    #546a73;   /* site-only. Kept. */
  --focus:      #ffffff;

  /* --- type, added 2026-08-19 -------------------------------------------
     Ten pages were falling back to system-ui and a bare `monospace` while the
     homepage ran InterVar and a real mono stack. Colour alone was never going
     to make them read as one site while the letterforms disagreed. */
  --sans: "InterVar", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --ease: cubic-bezier(.22,.7,.2,1);

  /* --- THE GOLD. The site had no amber at all. -------------------------
     This is the accent the eye actually reads as "the board" — it is the lit
     chip in the Jarvis v1 hero. Adding it is the second half of matching. */
  --amber:      #ffc36b;
  --amber-ink:  #ffd9a0;
  --amber-dim:  #d8b478;

  /* --- state ------------------------------------------------------------
     Board values are canonical. The site's older names are aliased below
     rather than deleted, so nothing that references them breaks. */
  --red:        #ff3b30;
  --red-ink:    #ff8a80;
  --red-pale:   #ffd2cf;
  --grn:        #46d17a;
  --grn-ink:    #8ff0b4;

  /* ALIASES — AND THESE THREE DO SHIFT THE COLOUR SLIGHTLY. Flagged rather
     than slipped in, because "match the board" was the instruction and a
     silent visual change is not the same as a matched one:
       --good  #8fdcb0 -> #8ff0b4  (barely perceptible)
       --bad   #ffb3a7 -> #ffd2cf  (paler, softer red)
       --green #5ce8b0 -> #46d17a  (the real change — less mint, more green)
     If any of these looks wrong in place, pin that one back to its old hex
     here, in this file, and write down why. Do not fix it on the page. */
  --good:       var(--grn-ink);
  --bad:        var(--red-pale);
  --green:      var(--grn);

  --navy:       #0b2d50;   /* site-only. Kept. */

  /* --- geometry ---------------------------------------------------------
     The board is sharp (3px) and the site is soft (14px buttons). Colour
     alone will not make them read as one system if the corners disagree, so
     both are named here and the choice is deliberate rather than inherited.
     Left as-is for now: changing button geometry is a look change Mark has
     not asked for, and this file's job today is shading. */
  --radius:     3px;       /* board default, for panels and rules */
  --btn-radius: 14px;      /* site buttons, unchanged on purpose */

  --btn-glow:       0 0 20px 1px rgba(135,205,221,.32),
                    0 14px 34px -12px rgba(135,205,221,.55);
  --btn-glow-hover: 0 0 26px 3px rgba(135,205,221,.5),
                    0 16px 38px -10px rgba(135,205,221,.65);

  /* --- type -------------------------------------------------------------
     THE REAL DECLARATIONS, and the ones that were wrong. 2026-08-19 added a
     matching pair near the top of this block; these two are LATER in the same
     :root, so they won, and the change looked applied while nothing moved.
     Caught by reading the computed value off a rendered page rather than by
     reading this file — /projects reported system-ui with the new tokens
     apparently in place.
     TWO DECLARATIONS OF ONE TOKEN IN ONE BLOCK IS THE BUG. The pair above has
     been left where it is only because it now says the same thing; if these
     ever disagree again, delete one rather than reasoning about order. */
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --sans: "InterVar", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Component tokens, added 2026-08-14 so the light theme below can reach a
     few values index.html/business.html used to paint as literal hex/rgba.
     Each default here is the exact literal it replaces, so the dark theme
     is unchanged; only the light block gives any of these a new value. */
  --topbar-bg:      rgba(2,6,13,.9);   /* was inline rgba(2,6,13,.9) */
  --tt-bg:          #0e191f;           /* nav pill-group fill */
  --tt-border:      #313b40;           /* nav pill-group border */
  --tt-cta-hover-bg:#a5dcea;           /* nav "Let's talk" hover fill */
  /* --- NAV IS PINNED DARK IN BOTH THEMES, added 2026-08-14. Mark's call:
     the menu on / and /business must match /agents (assets/site.css), which
     has no light theme at all and always renders the dark bar. --topbar-bg,
     --tt-bg, --tt-border and --tt-cta-hover-bg above are therefore NOT
     overridden in the light block below on purpose — they stay these exact
     values in both themes. The three tokens here carry the nav's TEXT and
     accent colours, which used to reference --ink-read/--bg/--signal
     directly — fine while the nav followed the theme, wrong the moment it
     stopped, because those three now flip to their LIGHT values while the
     bar they sit on stays dark. Pinned separately so the rest of the page
     can keep following the theme. --tt-ink is dark-theme --ink-read
     (#b0b0b0) on --tt-bg (#0e191f): 8.22:1. --tt-on-signal is dark-theme
     --bg (#02060d) on --tt-signal (#87cddd): 10.98:1. Both numbers match
     the WCAG comment already on .nav-links/.tt-cta in index.html/
     business.html, because these are the same two pairings, just reachable
     by name now instead of by coincidence of which theme was active. */
  --tt-ink:         #b0b0b0;
  --tt-signal:      #87cddd;
  --tt-on-signal:   #02060d;
  /* THE WORDMARK NEEDS THE SAME PIN, found rendering this — it sits inside
     .topbar too and was still reading --ink-bright/--ink-dim/--green/--ink
     straight, which in light mode computed to #060c11 (near-black) for the
     name against a #0e191f bar: 1.1:1, effectively invisible. Same fault as
     .tt, same fix. */
  --tt-name:        #ffffff;   /* dark-theme --ink-bright, the wordmark itself */
  --tt-strap:       #7d8f96;   /* dark-theme --ink-dim, the typed strapline */
  --tt-accent:      #46d17a;   /* dark-theme --green, the ~$ prompt + cursor */
  --tt-strap-hover: #d5efff;   /* dark-theme --ink, strapline on :hover */
  --cta2-bg:        rgba(213,239,255,.1);  /* .cta-secondary resting fill */
  --cta2-bg-hover:  rgba(213,239,255,.18);
  --cta-bg:         var(--ink);        /* .cta resting fill (pale-ice in dark) */
  --cta-ink:        var(--navy);       /* .cta text */
  --cta-hover-bg:   #ffffff;           /* .cta hover/focus fill */
}

/* ----------------------------------------------------------------------------
   CONTRAST — check this before shipping, do not assume it survived.
   Dropping --bg from #030e12 to #02060d darkens the ground under every text
   token, which HELPS light-on-dark contrast. The risk is the other direction:
   --ink-faint (#56656c) and --line-ui (#546a73) are the two dimmest things
   here and they were already the marginal ones. Nadia audits; this comment is
   here so the next person knows where to look first rather than re-deriving it.
   -------------------------------------------------------------------------- */

/* LIGHT THEME, added 2026-08-14. `prefers-color-scheme` only — no toggle, no
   localStorage, no class-switching JS, same as the `prefers-reduced-motion`
   query already shipping on these pages. The dark block above is untouched
   and stays the default; everything below only applies when the query
   matches, so a browser with no preference renders exactly what shipped
   before this file existed.

   Not the dark palette inverted by formula. --signal and the red/green state
   pair are pale, built for a near-black ground, and read as barely-there on
   white — each moved to a darker stop of the SAME hue instead. Every pairing
   was checked against the real WCAG contrast formula: ink-read on bg 8.11:1,
   ink-bright on bg 18.11:1, ink-dim on bg 6.41:1, ink-faint on bg-2 5.03:1,
   signal on bg 5.52:1, signal on bg-2 5.99:1, focus ring on bg 17.73:1,
   amber-ink/red-ink/grn-ink on bg 8.52/6.85/6.06:1 — all clear the 4.5:1
   body-text floor. Geometry (--radius/--btn-radius/--btn-glow*) is shape,
   not colour, and is left inherited from the dark block on purpose.

   SITE-THEME-PIN, added 2026-08-14 for the dashboard's Site Settings panel.
   Mark: "the website should have a light theme to select in there." There is
   no shared storage between ai.markdalton.com (this dashboard) and
   markdalton.com (static, Cloudflare Pages, different origin) and no script
   runs on the public site, so a per-visitor toggle is not possible — the
   picker instead edits THIS FILE to choose the site's SHIPPED DEFAULT, and
   that only reaches real visitors on the next deploy. It does that by
   swapping the media feature on the line below between the two states named
   here, and nothing else — the values inside stay exactly as computed above,
   never duplicated:
     "jarvis" (today's live default) — @media (prefers-color-scheme: light):
       this block applies only to a visitor whose OWN device prefers light;
       everyone else keeps the dark :root above.
     "light" (pinned) — @media all: this block applies to EVERY visitor,
       regardless of their device, because `all` always matches.
   Toggled by server.py's _set_site_theme() — see voice-visualizer/server.py.
   Do not hand-edit the query on the next line without also checking that
   function still recognises the result; it looks for these two exact
   strings and refuses to guess if it finds anything else. */
@media (prefers-color-scheme: light) {
  :root {
    --bg:         #f3f6f8;
    --bg-2:       #ffffff;
    --bg-3:       #e7edf1;
    --panel:      #ffffff;

    --ink-bright: #060c11;
    --ink:        #16232b;
    --ink-read:   #3c4d55;
    --ink-dim:    #4c5c63;
    --ink-faint:  #647178;

    --signal:     #0e6c86;

    --line:       rgba(15,45,60,.14);
    --line-edge:  rgba(15,45,60,.34);
    --line-ui:    #748790;
    --focus:      #0b0f12;

    --amber:      #8a4e00;
    --amber-ink:  #6b3c00;
    --amber-dim:  #ad6a1f;

    --red:        #c22e24;
    --red-ink:    #a3241c;
    --red-pale:   #f4d9d6;
    --grn:        #1f8a4c;
    --grn-ink:    #146b3a;
    --good:       var(--grn-ink);
    --bad:        var(--red-ink);
    --green:      var(--grn);

    /* --topbar-bg/--tt-bg/--tt-border/--tt-cta-hover-bg/--tt-ink/--tt-signal/
       --tt-on-signal are DELIBERATELY ABSENT here — see the comment on them
       in the dark block above. The nav stays pinned dark in this theme too,
       matching /agents. Only the primary .cta button (the big hero buttons,
       a different component from the nav's small .tt-cta pill) follows the
       theme, below. */
    /* .cta is a PALE button in the dark theme (fill var(--ink), pale there)
       with dark navy text. --ink is dark in THIS theme, same as every other
       token that carries text, so the button flips to dark-fill/pale-text
       instead of forcing --ink pale just for one component. */
    --cta2-bg:         rgba(15,45,60,.05);
    --cta2-bg-hover:   rgba(15,45,60,.1);
    --cta-bg:          #0e2a44;
    --cta-ink:         #eef6fb;
    --cta-hover-bg:    #123a5c;
  }
}