/* AI with Malaika — design tokens, v2 (18-Oct-2026)
   Source of truth: ai-with-malaika.md, sections 3–5. If this file and the .md disagree, the .md wins.

   Two independent switches on <html>:
     data-mode   = light | dark        (unset: follows the device setting)
     data-accent = copper | saffron | chartreuse | jade   (unset: copper, the default)

   Fonts: Bricolage Grotesque (display), Figtree (text), JetBrains Mono (prompts and labels).
   <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,700;12..96,800&family=Figtree:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> */

:root{
  /* accents: fill, text on fill, accent text on light ground, accent text on dark ground */
  --copper:#D2603F;     --copper-on:#140B08;     --copper-ink-l:#A3432A;     --copper-ink-d:#E58466;
  --saffron:#E9A830;    --saffron-on:#161004;    --saffron-ink-l:#835600;    --saffron-ink-d:#EDB54E;
  --chartreuse:#C8F04A; --chartreuse-on:#121A02; --chartreuse-ink-l:#4C6600; --chartreuse-ink-d:#C8F04A;
  --jade:#22A37A;       --jade-on:#04140E;       --jade-ink-l:#0F6E51;       --jade-ink-d:#3DBF93;

  /* type */
  --font-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --font-text:Figtree,"Segoe UI",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --t-display:clamp(2.75rem,1.6rem + 5.2vw,6rem);   /* 44 → 96 */
  --t-h1:clamp(2.25rem,1.6rem + 2.8vw,3.5rem);      /* 36 → 56 */
  --t-h2:clamp(1.625rem,1.3rem + 1.4vw,2.25rem);    /* 26 → 36 */
  --t-h3:clamp(1.25rem,1.15rem + .45vw,1.5rem);     /* 20 → 24 */
  --t-lead:clamp(1.0625rem,1rem + .3vw,1.25rem);    /* 17 → 20 */
  --t-body:1rem;      /* 16 */
  --t-small:.875rem;  /* 14 */
  --t-prompt:.875rem; /* 14, mono */
  --t-label:.75rem;   /* 12, mono, upper case */
  --track-display:-.045em; --track-h:-.03em; --track-label:.06em;
  --lh-display:.95; --lh-h:1.1; --lh-body:1.6; --lh-prompt:1.65;

  /* space: 4 px base */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;
  --page-max:1240px; --gutter:clamp(16px,4vw,40px); --measure:62ch;
  --r-xs:4px;--r-sm:6px;--r-md:10px;--r-lg:16px;--r-pill:999px;

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --d-micro:160ms; --d-ui:240ms; --d-reveal:600ms; --d-draw:700ms;

  /* status (fixed across accents) */
  --error-l:#B3261E; --error-d:#F2867E; --ok-l:#24693F; --ok-d:#6CC28E;
}

/* ---------- mode: light (default) ---------- */
:root,[data-mode=light]{
  color-scheme:light;
  --bg:#EFEBE7; --surface:#F7F4F1; --well:#E7E2DD; --fg:#141212; --fg-muted:#5A5452;
  --line:rgba(20,18,18,.12); --line-strong:rgba(20,18,18,.28);
  --glow-a:.30; --img-dim:1; --error:var(--error-l); --ok:var(--ok-l);
  --shadow-pop:0 12px 32px -12px rgba(20,18,18,.28);
}
/* ---------- mode: dark ---------- */
[data-mode=dark]{
  color-scheme:dark;
  --bg:#0B0B0B; --surface:#141313; --well:#1D1B1B; --fg:#F3F0EC; --fg-muted:#9C9690;
  --line:rgba(243,240,236,.12); --line-strong:rgba(243,240,236,.28);
  --glow-a:.42; --img-dim:.62; --error:var(--error-d); --ok:var(--ok-d);
  --shadow-pop:0 12px 32px -12px rgba(0,0,0,.7);
}
@media (prefers-color-scheme:dark){
  :root:not([data-mode=light]){
    color-scheme:dark;
    --bg:#0B0B0B; --surface:#141313; --well:#1D1B1B; --fg:#F3F0EC; --fg-muted:#9C9690;
    --line:rgba(243,240,236,.12); --line-strong:rgba(243,240,236,.28);
    --glow-a:.42; --img-dim:.62; --error:var(--error-d); --ok:var(--ok-d);
    --shadow-pop:0 12px 32px -12px rgba(0,0,0,.7);
  }
}

/* ---------- accent themes ---------- */
:root,[data-accent=copper]{--acc:var(--copper);--on-acc:var(--copper-on);--acc-ink-l:var(--copper-ink-l);--acc-ink-d:var(--copper-ink-d);--acc-rgb:210,96,63}
[data-accent=saffron]{--acc:var(--saffron);--on-acc:var(--saffron-on);--acc-ink-l:var(--saffron-ink-l);--acc-ink-d:var(--saffron-ink-d);--acc-rgb:233,168,48}
[data-accent=chartreuse]{--acc:var(--chartreuse);--on-acc:var(--chartreuse-on);--acc-ink-l:var(--chartreuse-ink-l);--acc-ink-d:var(--chartreuse-ink-d);--acc-rgb:200,240,74}
[data-accent=jade]{--acc:var(--jade);--on-acc:var(--jade-on);--acc-ink-l:var(--jade-ink-l);--acc-ink-d:var(--jade-ink-d);--acc-rgb:34,163,122}

/* accent used as text: the mode picks the safe shade */
:root,[data-mode=light]{--acc-ink:var(--acc-ink-l);--acc-edge:var(--acc-ink-l)}
[data-mode=dark]{--acc-ink:var(--acc-ink-d);--acc-edge:transparent}
@media (prefers-color-scheme:dark){:root:not([data-mode=light]){--acc-ink:var(--acc-ink-d);--acc-edge:transparent}}

/* the corner light: one per view, top left, never animated */
.glow{position:relative;isolation:isolate}
.glow::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 55% at 0% 0%,rgba(var(--acc-rgb),var(--glow-a)),transparent 70%)}

/* the highlighter: the brand's one gesture */
.hl{background:linear-gradient(transparent 12%,var(--acc) 12%,var(--acc) 92%,transparent 92%) no-repeat 0 0/100% 100%;
  color:var(--on-acc);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}}