/* quellbot tokens: the single source of truth for BOTH the site and the console.
   The console inlines this file at boot; the site links it. Edit here only.

   THE ACCENT IS ONE VARIABLE. Change --accent (once per theme) and every
   derived value (soft fills, hairlines, glow, accent-as-text, selection) follows
   via color-mix(). The only companion you must set with it is --on-accent: the
   text colour on a solid accent fill (near-black for a bright hue, white for a
   dark one), because no CSS can pick that reliably for you. */

:root{
  /* neutral ramp (a hair cool, so the accent burns against it) */
  --n-950:#040405;--n-900:#060607;--n-880:#0a0a0c;--n-850:#101012;--n-800:#16161a;
  --n-750:#1d1d22;--n-700:#1f1f24;--n-600:#2c2c33;--n-500:#45454d;--n-400:#5c5c56;
  --n-300:#94948c;--n-200:#c6c6bf;--n-100:#f2f2ee;--n-000:#ffffff;
  /* paper ramp (light theme) */
  --p-000:#ffffff;--p-050:#fafaf7;--p-100:#f4f4f0;--p-200:#ecece6;--p-300:#e2e2da;
  --p-400:#d8d8cf;--p-500:#c4c4b9;--p-600:#a3a396;--p-700:#84847a;--p-800:#5d5d55;
  --p-900:#33332e;--p-950:#141412;
  /* status ramps (ok is teal so success never collides with the accent) */
  --teal-500:#45d4a8;--teal-700:#1f9573;--amber-500:#f2b83b;--amber-700:#a3760f;
  --red-500:#ff5d54;--red-700:#c9392a;
}

/* ── DARK (default) ─────────────────────────────────────────────────────── */
:root{
  --accent:#c6f232;            /* <- the one variable */
  --on-accent:#101601;         /* <- its companion: text on a solid accent fill */

  --accent-ink:color-mix(in srgb,var(--accent) 82%,white);       /* accent as text */
  --accent-soft:color-mix(in srgb,var(--accent) 9%,transparent);  /* fills */
  --accent-line:color-mix(in srgb,var(--accent) 32%,transparent); /* borders */
  --accent-glow:color-mix(in srgb,var(--accent) 50%,transparent); /* CRT bleed */
  --selection-bg:var(--accent);--selection-ink:var(--on-accent);

  --bg:var(--n-900);--bg2:var(--n-880);--panel:var(--n-850);--panel2:var(--n-800);--panel3:var(--n-750);
  --line:var(--n-700);--line2:var(--n-600);
  --ink:var(--n-100);--dim:var(--n-300);--faint:#7b7b74;

  --ok:var(--teal-500);--ok-soft:rgba(69,212,168,.11);--ok-line:rgba(69,212,168,.32);
  --warn:var(--amber-500);--warn-soft:rgba(242,184,59,.11);--warn-line:rgba(242,184,59,.32);
  --bad:var(--red-500);--bad-soft:rgba(255,93,84,.11);--bad-line:rgba(255,93,84,.32);
  --scrim:rgba(4,4,5,.74);--glass:rgba(16,16,18,.68);

  --shadow:0 1px 0 rgba(255,255,255,.02) inset,0 18px 40px -28px rgba(0,0,0,.9);
  --shadow-lift:0 1px 0 rgba(255,255,255,.03) inset,0 22px 46px -30px rgba(0,0,0,.95);
  --shadow-pop:0 24px 60px -40px rgba(0,0,0,.9);
  --shadow-hero:0 30px 70px -45px rgba(0,0,0,.9);
}

/* ── LIGHT ──────────────────────────────────────────────────────────────── */
[data-theme="light"]{
  --accent:#5c7d08;
  --on-accent:#ffffff;

  --accent-ink:color-mix(in srgb,var(--accent) 85%,black);
  --accent-soft:color-mix(in srgb,var(--accent) 9%,transparent);
  --accent-line:color-mix(in srgb,var(--accent) 30%,transparent);
  --accent-glow:color-mix(in srgb,var(--accent) 30%,transparent);
  --selection-bg:color-mix(in srgb,var(--accent) 28%,white);--selection-ink:var(--p-950);

  --bg:var(--p-100);--bg2:var(--p-050);--panel:var(--p-000);--panel2:var(--p-200);--panel3:var(--p-300);
  --line:var(--p-400);--line2:var(--p-500);
  --ink:var(--p-950);--dim:var(--p-800);--faint:#6e6e66;

  --ok:var(--teal-700);--ok-soft:rgba(31,149,115,.09);--ok-line:rgba(31,149,115,.28);
  --warn:var(--amber-700);--warn-soft:rgba(163,118,15,.09);--warn-line:rgba(163,118,15,.28);
  --bad:var(--red-700);--bad-soft:rgba(201,57,42,.08);--bad-line:rgba(201,57,42,.26);
  --scrim:rgba(20,20,18,.4);--glass:rgba(255,255,255,.72);

  --shadow:0 1px 2px rgba(23,22,20,.04),0 14px 32px -26px rgba(23,22,20,.5);
  --shadow-lift:0 2px 4px rgba(23,22,20,.05),0 18px 38px -28px rgba(23,22,20,.55);
  --shadow-pop:0 20px 48px -32px rgba(23,22,20,.4);
  --shadow-hero:0 26px 60px -40px rgba(23,22,20,.42);
}

/* ── shared, theme-independent ──────────────────────────────────────────── */
:root{
  --shadow-accent:0 22px 46px -30px var(--accent-glow);
  --shadow-glow:0 0 24px -6px var(--accent-glow);
  --ring-focus:0 0 0 2px var(--bg),0 0 0 4px var(--accent);

  --font-sans:"Geist",ui-sans-serif,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:var(--font-sans);--mono:var(--font-mono);

  --fs-display-1:56px;--fs-display-2:44px;--fs-title-1:32px;--fs-title-2:30px;--fs-title-3:26px;
  --fs-title-4:23px;--fs-title-5:21px;--fs-heading:19px;--fs-subhead:16px;
  --fs-body-lg:16.5px;--fs-body:15px;--fs-body-sm:14px;--fs-caption:13px;--fs-caption-sm:12.5px;
  --fs-micro:11.5px;--fs-kicker:11px;--fs-label:10.5px;--fs-code:12px;
  --ls-display:-.045em;--ls-title:-.035em;--ls-heading:-.024em;--ls-subhead:-.02em;
  --ls-tight:-.015em;--ls-body:-.006em;--ls-wide:.08em;--ls-wider:.1em;
  --type-display-1:800 var(--fs-display-1)/1.03 var(--font-sans);
  --type-display-2:800 var(--fs-display-2)/1.08 var(--font-sans);
  --type-title-1:700 var(--fs-title-1)/1.15 var(--font-sans);
  --type-title-2:700 var(--fs-title-2)/1.2 var(--font-sans);
  --type-title-3:700 var(--fs-title-3)/1.25 var(--font-sans);
  --type-title-4:700 var(--fs-title-4)/1.3 var(--font-sans);
  --type-title-5:700 var(--fs-title-5)/1.35 var(--font-sans);
  --type-heading:700 var(--fs-heading)/1.35 var(--font-sans);
  --type-subhead:700 var(--fs-subhead)/1.45 var(--font-sans);
  --type-body-lg:400 var(--fs-body-lg)/1.7 var(--font-sans);
  --type-body:400 var(--fs-body)/1.6 var(--font-sans);
  --type-body-sm:400 var(--fs-body-sm)/1.6 var(--font-sans);
  --type-caption:400 var(--fs-caption)/1.55 var(--font-sans);
  --type-button:600 13.5px/1 var(--font-sans);
  --type-button-lg:700 var(--fs-body)/1 var(--font-sans);
  --type-pill:600 var(--fs-micro)/1 var(--font-sans);
  --type-kicker:600 var(--fs-kicker)/1 var(--font-mono);
  --type-label:600 var(--fs-label)/1 var(--font-mono);
  --type-code:400 var(--fs-code)/1.5 var(--font-mono);
  --type-metric:700 30px/1 var(--font-sans);   /* stat card values, run cost */
  --type-log:400 12.5px/1.85 var(--font-mono); /* log wells */

  /* the tail of the accent progress fill: a lighter step off --accent, so the
     gradient reads as one hue in both themes rather than a second colour */
  --ph-400:color-mix(in srgb,var(--accent) 70%,white);

  --sp-1:4px;--sp-1-5:6px;--sp-2:8px;--sp-2-5:10px;--sp-3:12px;--sp-3-5:14px;--sp-4:16px;
  --sp-4-5:18px;--sp-5:20px;--sp-5-5:22px;--sp-6:24px;--sp-7:28px;--sp-8:32px;--sp-10:40px;
  --sp-12:48px;--sp-14:56px;--sp-16:64px;--sp-18:72px;
  --pad-card:20px 22px;--pad-card-dense:16px 18px;--pad-row:14px 20px;--pad-pill:6px 10px;
  --pad-btn:10px 16px;--pad-btn-lg:13px 22px;--pad-input:10px 12px;--gap-inline:8px;

  --r-xs:3px;--r-sm:4px;--r-md:6px;--r-lg:8px;--r-xl:10px;--r-2xl:11px;--r-3xl:12px;--r-4xl:14px;--r-5xl:16px;--r-full:999px;

  --ease-out:cubic-bezier(.2,.8,.2,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);--ease-spring-soft:cubic-bezier(.34,1.35,.5,1);
  --dur-1:120ms;--dur-2:160ms;--dur-3:180ms;--dur-4:240ms;--dur-5:280ms;--dur-6:340ms;--dur-7:500ms;
  --lift-1:translateY(-2px);--lift-btn:translateY(-1.5px);--lift-2:translateY(-4px);--press:scale(.985);
  --t-color:color var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out);
  --t-surface:border-color var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out),box-shadow var(--dur-3) var(--ease-out);
  --t-lift:transform var(--dur-3) var(--ease-out),border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-3) var(--ease-out);

  --shell-rail:262px;--shell-topbar:64px;--site-header:62px;--content-max:1180px;--site-max:1320px;
  --read-max:920px;--prose-max:70ch;--lede-max:52ch;--docs-rail:248px;--gutter:40px;--gutter-sm:22px;--grid-cell:56px;
}

@keyframes qbrise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes qbpulse{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes qbbeat{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
@keyframes qbdraw{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
@keyframes qbblink{0%,55%{opacity:1}56%,100%{opacity:0}}
@keyframes qbsignal{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

::selection{background:var(--selection-bg);color:var(--selection-ink)}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}