/* ═══════════════════════════════════════════════════════════════════════════
   THE STORK LIFE — CANONICAL THEME TOKENS
   ---------------------------------------------------------------------------
   THIS IS THE ONE FILE YOU EDIT TO CHANGE A COLOUR.

   Before this file existed the palette lived in five places that had already
   drifted apart: index.html's inline <style>, assets/design.css, assets
   /nandi-theme.css, assets/theme.css and assets/legal.css each declared their
   own :root — so "day accent" was #C2600A on the home page, #17788C in the
   Know-Thyself tools and #16B0C4 in design.css, and the login modal was still
   painted in a design language (terracotta #D97757 on near-black) that the
   site stopped using two redesigns ago.

   ── HOW IT IS ORGANISED ────────────────────────────────────────────────────
   §0  BRAND PRIMITIVES  — the literal hex values, declared exactly once.
                           Nothing below this section contains a raw colour.
   §1  CORE SURFACE      — public site: index, blog, legal, 404.
   §2  KNOW-THYSELF      — html.kt: the astro / prime / web tools.
   §3  ADMIN             — html.admin: /admin/*, its own near-black language.
   §4  SHARED COMPONENTS — the theme toggle itself.

   To restyle the brand, change §0. To change what one surface does with the
   brand, change that surface's section. You should never need to touch a
   page's own stylesheet to fix a theme bug again.

   ── HOW IT WINS THE CASCADE ────────────────────────────────────────────────
   Every block below is selected as html[data-theme=...] or
   html:not([data-theme="day"]), specificity (0,1,1). Every legacy :root in
   the per-page stylesheets is (0,1,0). So this file wins on specificity and
   NOT on load order — it is safe to link it before or after anything else,
   and a stale cached copy of another stylesheet cannot silently take over.

   ── PAIRING ────────────────────────────────────────────────────────────────
   assets/theme.js is the matching runtime: it sets <html data-theme>, owns the
   localStorage key, and wires every toggle. Load it in <head>, before paint.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════ §0 · BRAND PRIMITIVES ══════════════════════
   Theme-independent. These are "what colour is Stork amber", not
   "what colour is a button" — the mapping happens in §1–§3. */
:root{
  /* amber — the display accent. Note the two families: the bright pair is for
     fills and for text on dark; the "ink" pair is darkened to clear WCAG AA
     as text on white, which #F59120 does not (2.3:1). */
  --stork-amber:#F59120;
  --stork-amber-bright:#FFB25C;
  --stork-amber-deep:#E07C0A;
  --stork-amber-star:#FFCB85;
  --stork-amber-ink:#C2600A;        /* AA text on white */
  --stork-amber-ink-deep:#8F4700;
  --stork-amber-rgb:245,145,32;
  --stork-amber-ink-rgb:194,96,10;

  /* teal — the secondary / small-accent-text colour */
  --stork-teal:#17788C;
  --stork-teal-bright:#2AA3B1;
  --stork-teal-deep:#12616F;
  --stork-teal-night:#4FC3D6;       /* teal reads brighter on navy */

  /* the design's near-black band — footer and the dark editorial strips */
  --stork-ink-band:#0A0A0A;

  /* night ground — deep navy */
  --stork-navy:#0F1922;
  --stork-navy-soft:#15202B;
  --stork-navy-deep:#0A121A;
  --stork-navy-surface:#1B2836;
  --stork-navy-surface2:#22303E;
  --stork-navy-rule:#26343F;
  --stork-night-text:#E9F1F7;
  --stork-night-body:#A7B9C7;
  --stork-night-mute:#7B8E9D;

  /* day ground — white settling into mint */
  --stork-white:#FFFFFF;
  --stork-mint:#EDF8FB;
  --stork-fog:#F4F7F8;
  --stork-ink:#16212B;
  --stork-body:#4A5C6E;
  --stork-mute:#8296A6;

  /* admin ground — "Golden Hour Studio" near-black. Deliberately NOT the site
     navy: the admin panel is a separate tool and reads better held apart from
     the public site, so it keeps its own dark. */
  --stork-coal:#0c0a09;
  --stork-coal-soft:#100d0b;
  --stork-coal-surface:#15110e;
  --stork-coal-surface2:#1b1512;
  --stork-coal-line:#2a2018;
  --stork-coal-text:#ece6e1;
  --stork-coal-dim:#9a8c80;

  /* status */
  --stork-ok:#8fce9b;
  --stork-err:#e58a7a;
  --stork-ok-ink:#1E7A57;
  --stork-err-ink:#B23B3B;

  /* motion */
  --stork-ease:cubic-bezier(.4,0,.2,1);
}


/* ══════════════════════ §1 · CORE SURFACE ══════════════════════
   The public site: index.html, blog/*, the legal pages, 404.
   Consumed by assets/design.css, assets/nandi-theme.css, assets/legal.css and
   index.html's inline <style>. */

/* ─────────── §1a · NIGHT ───────────
   Selected with :not([data-theme="day"]) so the site still has a complete,
   coherent palette if data-theme is missing entirely — i.e. if JavaScript is
   blocked or theme.js fails to load. It renders night rather than unstyled. */
html:not([data-theme="day"]){
  --font-display:'Philosopher',Georgia,'Times New Roman',serif;
  --font-body:'Raleway',system-ui,-apple-system,'Segoe UI',sans-serif;

  --bg:var(--stork-navy);
  --bg-soft:var(--stork-navy-soft);
  --bg-deep:var(--stork-navy-deep);
  --surface:var(--stork-navy-surface);
  --surface2:var(--stork-navy-surface2);
  --page-alt:var(--stork-navy-soft);
  --rule:var(--stork-navy-rule);

  --text:var(--stork-night-text);
  --text-muted:var(--stork-night-body);
  --text-dim:var(--stork-night-mute);

  --accent:var(--stork-amber);
  --accent-2:var(--stork-amber-bright);
  --accent-deep:var(--stork-amber-deep);
  --accent-bright:var(--stork-amber-star);
  /* on navy the amber clears AA at body size, so --accent-ink can stay a
     genuine accent rather than a compensating darkening as it is in day */
  --accent-ink:var(--stork-teal-night);
  --gold-ink:#FFFFFF;                       /* text on an accent fill */

  --t-secondary:var(--stork-teal);
  --t-teal-bright:var(--stork-teal-bright);
  --t-teal-deep:var(--stork-teal);
  --deco:var(--stork-navy-surface2);
  --glass:var(--stork-navy-surface);

  --grad-cta:linear-gradient(135deg,#FFB25C 0%,#F59120 55%,#E07C0A 100%);
  --grad-ink:linear-gradient(100deg,#EDF8FB 25%,#CDEAF1 60%,#AEDDE8 95%);

  --t-about:#F59120;--t-philosophy:#17788C;--t-books:#D98A3D;--t-music:#E0709A;
  --t-adventure:#4FB6C9;--t-blog:#2AA3B1;--t-science:#4C8FE0;--t-shop:#4FAE86;

  --line:rgba(233,241,247,.14);
  --line-soft:rgba(233,241,247,.10);
  --border:rgba(233,241,247,.12);

  /* feeds every rgba(var(--accent-r),var(--accent-g),var(--accent-b),a) rule */
  --accent-r:245;--accent-g:145;--accent-b:32;

  --sl-shadow:rgba(0,0,0,.34);
  --sl-shadow-hover:rgba(0,0,0,.50);
  --ring:0 0 0 1px rgba(245,145,32,.38),0 22px 60px -28px rgba(245,145,32,.32);
  --shadow-1:0 18px 44px -28px rgba(0,0,0,.85);
  --shadow-2:0 32px 80px -34px rgba(0,0,0,.9);

  /* overlay / modal chrome — see §1c */
  --scrim:rgba(6,12,18,.74);
  --modal-bg:var(--stork-navy-surface);
  --modal-line:rgba(233,241,247,.14);
  --modal-field:var(--stork-navy-deep);
  --modal-text:var(--stork-night-text);
  --modal-dim:var(--stork-night-body);

  --ok:var(--stork-ok);
  --err:var(--stork-err);

  --ease:var(--stork-ease);
  color-scheme:dark;
}

/* ─────────── §1b · DAY ("Dawn") — the site default ─────────── */
html[data-theme="day"]{
  --font-display:'Philosopher',Georgia,'Times New Roman',serif;
  --font-body:'Raleway',system-ui,-apple-system,'Segoe UI',sans-serif;

  --bg:var(--stork-white);
  --bg-soft:var(--stork-mint);
  --bg-deep:var(--stork-ink-band);     /* footer + the design's dark bands */
  --surface:var(--stork-white);
  --surface2:var(--stork-fog);
  --deco:var(--stork-fog);
  --glass:var(--stork-white);          /* design.css paints day panels with this */
  --page-alt:var(--stork-mint);
  --rule:var(--stork-mint);

  --text:var(--stork-ink);
  --text-muted:var(--stork-body);
  --text-dim:var(--stork-mute);

  /* THE RULE THAT KEEPS BITING PEOPLE: in day, amber is a DISPLAY colour —
     fills, icons, headline spans, counters. #F59120 on white is ~2.3:1, so it
     must never carry small body text. Small text accents use --accent-ink,
     which is teal. Reach for --accent-ink, not --accent, whenever the thing
     you are colouring is text. */
  --accent:var(--stork-amber);
  --accent-2:var(--stork-amber-bright);
  --accent-deep:var(--stork-amber-deep);
  --accent-bright:var(--stork-amber-bright);
  --accent-ink:var(--stork-teal);      /* small-text accent — AA on white */
  --gold-ink:#FFFFFF;

  --t-secondary:var(--stork-teal);
  --t-teal-bright:var(--stork-teal);
  --t-teal-deep:var(--stork-teal-deep);

  --grad-cta:linear-gradient(135deg,#F9A63F 0%,#F59120 55%,#E07C0A 100%);
  --grad-ink:linear-gradient(100deg,#16212B 20%,#0A121A 80%);

  /* section tints stay on the darkened family — these DO carry small text */
  --t-about:#C2600A;--t-philosophy:#12616F;--t-books:#9C5A1E;--t-music:#A84A68;
  --t-adventure:#146E7D;--t-blog:#12616F;--t-science:#2F5FA8;--t-shop:#2E7D5B;

  --line:rgba(22,33,43,.10);
  --line-soft:rgba(22,33,43,.07);
  --border:rgba(22,33,43,.10);

  --accent-r:245;--accent-g:145;--accent-b:32;

  /* elevation — the design's two shadows and nothing louder */
  --sl-shadow:rgba(22,33,43,.06);
  --sl-shadow-hover:rgba(22,33,43,.13);
  --shadow-1:0 2px 18px var(--sl-shadow);
  --shadow-2:0 20px 44px var(--sl-shadow-hover);
  --ring:0 0 0 1px rgba(245,145,32,.30),0 20px 44px var(--sl-shadow-hover);
  --title-shadow:none;

  --scrim:rgba(22,33,43,.52);
  --modal-bg:var(--stork-white);
  --modal-line:rgba(22,33,43,.12);
  --modal-field:var(--stork-fog);
  --modal-text:var(--stork-ink);
  --modal-dim:var(--stork-body);

  /* darkened for AA on white — the night pair is far too pale here */
  --ok:var(--stork-ok-ink);
  --err:var(--stork-err-ink);

  --ease:var(--stork-ease);
  color-scheme:light;
}

/* ─────────── §1c · OVERLAY CHROME ───────────
   Every dialog on the site — the login/account modals injected by
   assets/auth.js, the cart drawer, the checkout sheet and the Know-Thyself
   unlock modal — was hardcoded to one dark palette and stayed dark on a white
   day page. They now all read from --scrim / --modal-* above, so a dialog
   follows the theme by default and a new dialog gets it for free. */


/* ══════════════════════ §2 · KNOW-THYSELF TOOLS ══════════════════════
   philosophy/knowthyself{astro,prime,web}. Each tool ships its own stylesheet
   with its own token names (--ink, --muted, --card, --teal, --gold …). Rather
   than rewrite three third-party-ish stylesheets, we map the brand onto the
   names they already use.

   Scoped to html.kt so these mappings cannot leak onto the public site, where
   --accent means something different (deep amber text, not teal). */

html.kt:not([data-theme="day"]){
  --bg:var(--stork-coal);
  --surface:var(--stork-coal-surface);
  --surface2:#100c08;
  --line:var(--stork-coal-line);
  --card:var(--stork-coal-surface);
  --text:var(--stork-coal-text);
  --ink:var(--stork-coal-text);
  --dim:var(--stork-coal-dim);
  --muted:var(--stork-coal-dim);
  --accent:var(--stork-amber);
  --accent-d:var(--stork-amber-bright);
  --accent-bright:var(--stork-amber-bright);
  --teal:#2a9d8f;
  --gold:#e8c061;
  --blue:#3a6ea5;
  --warn:#e08a4a;
  --calm:#5fae7a;
  --ok:#2f7d4f;
  --err:#b23b3b;
  --shadow:0 18px 50px -24px rgba(0,0,0,.7);
  --title-shadow:0 0 30px rgba(245,145,32,.4);
  color-scheme:dark;
}

html.kt[data-theme="day"]{
  --bg:var(--stork-white);
  --surface:var(--stork-white);
  --surface2:var(--stork-fog);
  --line:rgba(22,33,43,.12);
  --card:var(--stork-white);
  --text:var(--stork-ink);
  --ink:var(--stork-ink);
  --dim:var(--stork-body);
  --muted:var(--stork-body);
  /* teal, not amber: in these tools --accent paints headings, links and small
     labels, all of which sit as body-size text on white. */
  --accent:var(--stork-teal);
  --accent-d:var(--stork-teal-deep);
  --accent-bright:var(--stork-amber);
  --teal:var(--stork-teal);
  --gold:var(--stork-amber-deep);
  --blue:#2F5FA8;
  --warn:var(--stork-amber-ink);
  --calm:var(--stork-ok-ink);
  --ok:var(--stork-ok-ink);
  --err:var(--stork-err-ink);
  --shadow:0 2px 18px rgba(22,33,43,.06);
  --title-shadow:none;
  color-scheme:light;
}


/* ══════════════════════ §3 · ADMIN ══════════════════════
   /admin/*.html. Each page declares its own :root with the generic names
   (--bg, --surface, --text, --dim, --line, --accent) and admin/assets
   /admin.css declares the --a-* shell set. Both are (0,1,0), so the blocks
   below override them without editing fourteen inline <style> blocks.

   Night keeps the existing near-black exactly as it was — the admin panel was
   dark-only by design and nothing about it changes. Day is new. */

html.admin:not([data-theme="day"]){
  --bg:var(--stork-coal);
  --surface:var(--stork-coal-surface);
  --surface2:var(--stork-coal-surface2);
  --line:var(--stork-coal-line);
  --text:var(--stork-coal-text);
  --dim:var(--stork-coal-dim);
  --accent:var(--stork-amber);
  --ok:var(--stork-ok);
  --err:var(--stork-err);

  --a-bg:var(--stork-coal);
  --a-bg-soft:var(--stork-coal-soft);
  --a-surface:var(--stork-coal-surface);
  --a-surface2:var(--stork-coal-surface2);
  --a-line:var(--stork-coal-line);
  --a-text:var(--stork-coal-text);
  --a-dim:var(--stork-coal-dim);
  --a-accent:var(--stork-amber);
  --a-ok:var(--stork-ok);
  --a-err:var(--stork-err);

  --a-glow:rgba(245,145,32,.12);   /* body wash behind the page title */
  --a-on-accent:#1a120d;           /* text on an amber fill */
  --a-inset:rgba(255,255,255,.05);
  --a-card-sheen:rgba(255,255,255,.03);
  color-scheme:dark;
}

html.admin[data-theme="day"]{
  --bg:var(--stork-fog);
  --surface:var(--stork-white);
  --surface2:#EDF1F3;
  --line:rgba(22,33,43,.14);
  --text:var(--stork-ink);
  --dim:var(--stork-body);
  --accent:var(--stork-amber-ink);
  --ok:var(--stork-ok-ink);
  --err:var(--stork-err-ink);

  --a-bg:var(--stork-fog);
  --a-bg-soft:var(--stork-white);
  --a-surface:var(--stork-white);
  --a-surface2:#EDF1F3;
  --a-line:rgba(22,33,43,.14);
  --a-text:var(--stork-ink);
  --a-dim:var(--stork-body);
  --a-accent:var(--stork-amber-ink);
  --a-ok:var(--stork-ok-ink);
  --a-err:var(--stork-err-ink);

  --a-glow:rgba(245,145,32,.10);
  --a-on-accent:#FFFFFF;
  --a-inset:rgba(22,33,43,.04);
  --a-card-sheen:rgba(22,33,43,.015);
  color-scheme:light;
}


/* ─────────── §3b · ADMIN DAY FIX-UPS ───────────
   Most of the admin CSS is already token-driven, so §3 does the work. These
   are the leftovers: literal values baked into the fourteen inline <style>
   blocks that no token can reach.

   Three failure modes, all invisible until you actually switch to day:
     · form fields hardcoded to a near-black hex → black box on a white page
     · "sheen" fills of rgba(255,255,255,.03–.08) → white on white, so the
       element loses its shape entirely
     · #1a120d text on an amber fill → unreadable once --accent darkens

   Specificity note: this file is linked BEFORE each page's inline <style>, so
   these must outrank it on specificity rather than order. html.admin
   [data-theme="day"] is (0,2,1) against the pages' (0,1,0) — comfortably. */

html.admin[data-theme="day"] body{
  background:radial-gradient(1200px 620px at 50% -12%,var(--a-glow),transparent),var(--bg);
  color:var(--text);
}

/* form fields — the biggest offender, and the reason day was unusable here */
html.admin[data-theme="day"] input,
html.admin[data-theme="day"] textarea,
html.admin[data-theme="day"] select,
html.admin[data-theme="day"] .filter select,
html.admin[data-theme="day"] input[type=text],
html.admin[data-theme="day"] input[type=date],
html.admin[data-theme="day"] input[type=number]{
  background:var(--surface);border-color:var(--line);color:var(--text);
}
html.admin[data-theme="day"] input::placeholder,
html.admin[data-theme="day"] textarea::placeholder{color:var(--dim)}
html.admin[data-theme="day"] input:focus,
html.admin[data-theme="day"] textarea:focus,
html.admin[data-theme="day"] select:focus{outline:2px solid var(--accent);outline-offset:1px}

/* white-on-white sheens and washes */
html.admin[data-theme="day"] .acts button,
html.admin[data-theme="day"] .btn-ghost,
html.admin[data-theme="day"] .post-body code,
html.admin[data-theme="day"] .post-body pre{
  background:var(--surface2);border-color:var(--line);color:var(--text);
}
html.admin[data-theme="day"] .card,
html.admin[data-theme="day"] .hero{
  background:var(--surface);border-color:var(--line);box-shadow:0 10px 30px -22px rgba(22,33,43,.35);
}
html.admin[data-theme="day"] .hero{border-color:var(--accent)}

/* text sitting on an amber fill */
html.admin[data-theme="day"] .btn,
html.admin[data-theme="day"] .hero .go,
html.admin[data-theme="day"] .a-modal button.a-modal-ok,
html.admin[data-theme="day"] .a-pill.primary{color:var(--a-on-accent)}

/* the brand wordmark's amber bloom reads as a smudge on white */
html.admin[data-theme="day"] .brand{text-shadow:none}

/* status text — the night greens/reds are far too pale on white */
html.admin[data-theme="day"] .ok,
html.admin[data-theme="day"] .a-toast.ok{color:var(--ok)}
html.admin[data-theme="day"] .err,
html.admin[data-theme="day"] .a-toast.err{color:var(--err)}

/* shell chrome: the topbar's translucent near-black */
html.admin[data-theme="day"] .admin-topbar{background:rgba(255,255,255,.85)}
html.admin[data-theme="day"] .admin-sidebar{background:linear-gradient(180deg,var(--a-bg-soft),var(--a-bg))}


/* ══════════════════════ §4 · THE TOGGLE ══════════════════════
   One appearance for the button on every surface. Pages that place the toggle
   in their own header (index.html's .nav-utility, the legal pages' .legal-top)
   restyle it there; this is the fallback for anything that doesn't, including
   the floating button theme.js injects when a page has no toggle of its own. */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line,rgba(22,33,43,.14));
  background:var(--surface,var(--card,#fff));
  color:var(--accent,#17788C);
  font-size:1.05rem;line-height:1;cursor:pointer;flex-shrink:0;padding:0;
  transition:transform .35s var(--stork-ease),border-color .3s,background .4s,color .3s;
}
.theme-toggle:hover{transform:rotate(-18deg) scale(1.07);border-color:var(--accent,#17788C)}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* In the admin topbar the toggle is one of a row of pills, so it keeps
   admin.css's .a-pill shape and skips the circular button's spin. */
.admin-topbar .theme-toggle{width:auto;height:auto;border-radius:100px}
.admin-topbar .theme-toggle:hover{transform:none}

/* injected fallback only — a page with its own toggle keeps its own placement */
.theme-toggle.theme-toggle-floating{
  position:fixed;top:14px;right:14px;z-index:9998;width:44px;height:44px;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
}

/* Respect a visitor who has asked the OS to reduce motion. The toggle spin and
   the page-wide colour crossfade are both decorative. */
@media(prefers-reduced-motion:reduce){
  .theme-toggle{transition:none}
  .theme-toggle:hover{transform:none}
}
