/* ==========================================================================
   theme.css — the single source of truth for the Susten colour palette.

   Loaded AFTER each page stylesheet, so the :root block here wins over the
   copy of the palette still sitting in home.css / funded-audit.css / etc.
   Those copies are now dead defaults. When the palette changes, change it
   HERE and nowhere else.

   Three states, per the usual convention:
     - no attribute        → follow the operating system (prefers-color-scheme)
     - data-theme="dark"   → forced dark, regardless of OS
     - data-theme="light"  → forced light, regardless of OS

   Dark remains the default and the brand's native register. Light exists
   because a meaningful number of people read on a bright screen, in an
   office, or print the page.

   ⚡ The data-colour rule is unchanged and applies in both themes:
      AMBER  = baseline · before · benchmark · waste
      VIOLET = achieved · after · optimised · saved
   Both hues shift value between themes to stay legible; they never swap
   roles. See About-Susten.md §10.
   ========================================================================== */


/* ---------- DARK (default) ------------------------------------------------ */
:root {
  --void:#0B0910;  --void-2:#100D18;  --panel:#14111C;  --panel-2:#1A1626;
  --line:#241E33;  --line-2:#322947;
  --violet:#8C52FF; --violet-b:#A87BFF; --violet-d:#5B2FB0;
  --amber:#FFBD59;  --amber-b:#FFCE85;  --amber-d:#8A6323;
  --ice:#ECE8F6;   --dim:#9990B0;      --dimmer:#847BA0;
  --good:#4ADE9B;  --good-dim:#1C3A2C;

  /* --dimmer was #6B6382, which measures 3.52:1 on --void — below the 4.5:1
     needed for the small mono labels it is used on (section tags, telemetry
     labels, chart units). Nudged up to clear it. This is a pre-existing dark
     mode issue, not something light mode introduced; fixing it here means it
     is fixed once for every page. Revert this one value if the labels now read
     too loud. */

  /* Shadow is nearly invisible on a dark ground; light mode needs a real one. */
  --shadow:none;
  --panel-shadow:none;
  color-scheme: dark;
}


/* ---------- LIGHT --------------------------------------------------------- */
/* Applied when the OS asks for light and the user has not forced dark. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --void:#FAF9FC;  --void-2:#F2F0F8;  --panel:#FFFFFF;  --panel-2:#F6F4FB;
    --line:#E3DFEE;  --line-2:#CFC8E2;

    /* Violet darkens on white so it can carry text and thin strokes.
       --violet-b is the *emphasis* variant: brighter on dark, darker on light. */
    --violet:#7B3FF2; --violet-b:#5B2FB0; --violet-d:#C9B3FF;

    /* Amber has to darken substantially on a light ground. #FFBD59 on white is
       about 2:1 — unreadable as text and too weak as a thin stroke.
       This is not only an accessibility fix. The amber/violet pair carries the
       before/after comparison, so the two must read at similar weight: a pale
       amber bar beside a strong violet one would understate the baseline and
       misrepresent the very thing the chart exists to show. */
    --amber:#96650F;  --amber-b:#7A520B;  --amber-d:#F7E4C0;

    --ice:#26222E;   --dim:#5A5468;      --dimmer:#6E687E;
    --good:#12805A;  --good-dim:#D8F0E5;

    --shadow:0 1px 2px rgba(38,34,46,.06), 0 8px 24px -12px rgba(38,34,46,.18);
    --panel-shadow:0 1px 3px rgba(38,34,46,.05);
    color-scheme: light;
  }
}

/* Forced light — same values, applied regardless of what the OS asks for. */
:root[data-theme="light"] {
  --void:#FAF9FC;  --void-2:#F2F0F8;  --panel:#FFFFFF;  --panel-2:#F6F4FB;
  --line:#E3DFEE;  --line-2:#CFC8E2;
  --violet:#7B3FF2; --violet-b:#5B2FB0; --violet-d:#C9B3FF;
  --amber:#96650F;  --amber-b:#7A520B;  --amber-d:#F7E4C0;
  --ice:#26222E;   --dim:#5A5468;      --dimmer:#6E687E;
  --good:#12805A;  --good-dim:#D8F0E5;
  --shadow:0 1px 2px rgba(38,34,46,.06), 0 8px 24px -12px rgba(38,34,46,.18);
  --panel-shadow:0 1px 3px rgba(38,34,46,.05);
  color-scheme: light;
}

html { scroll-behavior:smooth; overflow-x:hidden; }

/* Keyboard users get the same direct route to the content as visual users. */
.skip-link { position:fixed; left:var(--gut); top:.75rem; z-index:100; transform:translateY(-180%); padding:.65rem .85rem;
  background:var(--violet-b); color:var(--void); font-family:var(--mono); font-size:var(--t-1);
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none; transition:transform .18s ease; }
.skip-link:focus { transform:none; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }


/* ---------- THE HERO STAYS DARK IN BOTH THEMES ---------------------------- */
/* Deliberate. Three reasons:
     1. The canvas field is drawn in brand amber and violet at low alpha. On a
        white ground it washes out to nothing.
     2. A dark hero above a light page is a legible, intentional pattern — it
        reads as a masthead, not as a bug.
     3. It preserves the site's one moment of drama in both themes.
   Implemented by re-declaring the dark tokens on the hero's own subtree, so
   every child component inherits them without knowing about themes at all. */
:root[data-theme="light"] .hero,
:root[data-theme="light"] .telem {
  --void:#0B0910;  --void-2:#100D18;  --panel:#14111C;  --panel-2:#1A1626;
  --line:#241E33;  --line-2:#322947;
  --violet:#8C52FF; --violet-b:#A87BFF; --violet-d:#5B2FB0;
  --amber:#FFBD59;  --amber-b:#FFCE85;  --amber-d:#8A6323;
  --ice:#ECE8F6;   --dim:#9990B0;      --dimmer:#847BA0;
  --good:#4ADE9B;  --good-dim:#1C3A2C;
  --shadow:none;   --panel-shadow:none;
  background:var(--void); color:var(--ice);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero,
  :root:not([data-theme="dark"]) .telem {
    --void:#0B0910;  --void-2:#100D18;  --panel:#14111C;  --panel-2:#1A1626;
    --line:#241E33;  --line-2:#322947;
    --violet:#8C52FF; --violet-b:#A87BFF; --violet-d:#5B2FB0;
    --amber:#FFBD59;  --amber-b:#FFCE85;  --amber-d:#8A6323;
    --ice:#ECE8F6;   --dim:#9990B0;      --dimmer:#847BA0;
    --good:#4ADE9B;  --good-dim:#1C3A2C;
    --shadow:none;   --panel-shadow:none;
    background:var(--void); color:var(--ice);
  }
}


/* ---------- LIGHT-MODE CORRECTIONS ---------------------------------------- */
/* A handful of treatments were tuned for a dark ground and need adjusting
   rather than recolouring. Kept deliberately short — if this section grows,
   the palette above is wrong. */

:root[data-theme="light"] .pat,
:root:not([data-theme="dark"]) .pat {
  /* The circuit-trace pattern is drawn in brand violet/amber at 0.5 opacity.
     On white that reads as noise over the text beneath it. */
  opacity:.22;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pat { opacity:.5; }
}
:root[data-theme="dark"] .pat { opacity:.5; }

/* Panels earn a shadow on light, where a 1px border alone is too weak to
   separate a card from the page. On dark, --shadow is `none`, so this rule
   costs nothing there. */
.card, .panel, .qa, .laurel, .award, .backer, .model, .site, .step, .item {
  box-shadow:var(--panel-shadow);
}


/* ---------- THE TOGGLE ---------------------------------------------------- */
.themebtn {
  appearance:none; -webkit-appearance:none;
  display:inline-grid; place-items:center;
  width:34px; height:34px; flex:none;
  padding:0; margin:0;
  background:transparent;
  border:1px solid var(--line-2); border-radius:50%;
  color:var(--dim); cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.themebtn:hover { color:var(--ice); border-color:var(--violet); background:var(--panel); }
.themebtn svg { width:16px; height:16px; }

/* Show the icon for the theme you would switch TO, which is the convention
   people expect: a moon means "go dark". */
.themebtn .i-moon { display:none; }
.themebtn .i-sun  { display:block; }
:root[data-theme="light"] .themebtn .i-moon { display:block; }
:root[data-theme="light"] .themebtn .i-sun  { display:none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .themebtn .i-moon { display:block; }
  :root:not([data-theme="dark"]) .themebtn .i-sun  { display:none; }
}

/* The toggle sits in the nav, which is dark-on-dark in both themes only
   inside the hero. In the nav it follows the page. */
.nav .themebtn { margin-left:.2rem; }

/* The desktop nav deliberately collapses on small screens. The menu button
   and panel keep the same quiet instrument language without becoming a large
   rounded app drawer. */
.menu-btn { display:none; appearance:none; -webkit-appearance:none; width:44px; height:44px; padding:0;
  place-items:center; flex:none; border:1px solid var(--line-2); background:transparent; color:var(--dim);
  cursor:pointer; transition:color .18s ease, border-color .18s ease, background .18s ease; }
.menu-btn:hover, .nav.menu-open .menu-btn { color:var(--ice); border-color:var(--violet); background:var(--panel); }
.menu-btn svg { display:block; width:20px; height:20px; }
.menu-btn svg.menu-btn__close { display:none; }
.nav.menu-open .menu-btn svg.menu-btn__open { display:none; }
.nav.menu-open .menu-btn svg.menu-btn__close { display:block; }
.mobilemenu { display:none; border-top:1px solid var(--line); background:color-mix(in srgb,var(--void-2) 96%,transparent); }
.mobilemenu__in { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px; background:var(--line); }
.mobilemenu__label { grid-column:1 / -1; padding:.85rem var(--gut) .55rem; background:var(--void-2);
  color:var(--dimmer); font-family:var(--mono); font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; }
.mobilemenu a { display:flex; flex-direction:column; gap:.18rem; padding:.85rem var(--gut); background:var(--void);
  color:var(--ice); text-decoration:none; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.mobilemenu a:hover, .mobilemenu a:focus-visible { background:var(--panel); color:var(--violet-b); }
.mobilemenu small { color:var(--dimmer); font-family:var(--sans); font-size:.82rem; letter-spacing:0; text-transform:none; line-height:1.3; }
.nav.menu-open .mobilemenu { display:block; }
@media (max-width:940px) { .menu-btn { display:grid; } }
@media (max-width:520px) { .mobilemenu__in { grid-template-columns:1fr; } .mobilemenu__label { grid-column:auto; } }

@media (prefers-reduced-motion: reduce) {
  .themebtn, .menu-btn { transition:none; }
}