/* tokens/colors.css */
/* Agentic Links — base palette. Every surface colour resolves through a theme scope
   in themes.css; these are the raw values themes reference. */
:root{
  /* neutral ramp — midnight-first, cool */
  --al-black:#05070f;
  --al-ink-900:#0b0f1c;
  --al-ink-800:#131a2b;
  --al-ink-700:#1c2334;
  --al-ink-500:#3a445c;
  --al-ink-300:#8b93ab;
  --al-ink-100:#c9d0e2;
  --al-white:#f4f7ff;
  --al-paper:#eef1fa;
  --al-paper-2:#e3e8f5;
  --al-paper-line:#cfd6e7;

  /* accents — one hue per theme, never mixed */
  --al-mint:#5cf2b0;
  --al-mint-dim:#2fd493;
  --al-blue:#1a3cff;
  --al-blue-dim:#0f2ad6;
  --al-ember:#ff5a1f;
  --al-ember-dim:#e0430c;

  /* warm ramp — sunset theme only */
  --al-warm-950:#150a0e;
  --al-warm-900:#1f0d11;
  --al-warm-800:#2a1216;
  --al-warm-700:#3a181d;
  --al-warm-300:#c39887;
  --al-warm-100:#ffe9dc;

  /* semantic status — theme-independent */
  --al-live:#5cf2b0;
  --al-paused:#ffc247;
  --al-danger:#ff4d4d;
}

/* tokens/themes.css */
/* Three shipping themes. Members pick one; the public profile must look
   intentional in all three. The dither reads --ink and --ground from here, so
   CSS and canvas never drift apart. Default (no attribute) = midnight. */
:root,
[data-theme="midnight"]{
  --ground:var(--al-black);
  --ground-2:var(--al-ink-900);
  --ground-3:var(--al-ink-800);
  --ink:var(--al-white);
  --ink-2:var(--al-ink-100);
  --ink-3:var(--al-ink-300);
  --line:var(--al-ink-700);
  --line-strong:var(--al-ink-500);
  --accent:var(--al-mint);
  --accent-press:var(--al-mint-dim);
  --on-accent:var(--al-black);
  --focus:var(--al-mint);
  --dither-ink:var(--al-white);
  --dither-ground:var(--al-black);
}
[data-theme="paper"]{
  --ground:var(--al-white);
  --ground-2:var(--al-paper);
  --ground-3:var(--al-paper-2);
  --ink:var(--al-black);
  --ink-2:var(--al-ink-800);
  --ink-3:var(--al-ink-500);
  --line:var(--al-paper-line);
  --line-strong:var(--al-ink-300);
  --accent:var(--al-blue);
  --accent-press:var(--al-blue-dim);
  --on-accent:var(--al-white);
  --focus:var(--al-blue);
  --dither-ink:var(--al-black);
  --dither-ground:var(--al-white);
}
[data-theme="sunset"]{
  --ground:var(--al-warm-950);
  --ground-2:var(--al-warm-900);
  --ground-3:var(--al-warm-800);
  --ink:var(--al-warm-100);
  --ink-2:#f3cdb9;
  --ink-3:var(--al-warm-300);
  --line:var(--al-warm-700);
  --line-strong:#5a2a2f;
  --accent:var(--al-ember);
  --accent-press:var(--al-ember-dim);
  --on-accent:var(--al-warm-950);
  --focus:var(--al-ember);
  --dither-ink:var(--al-ember);
  --dither-ground:var(--al-warm-950);
}

/* tokens/typography.css */
/* Type does the heavy lifting. Two faces only: a tight grotesque for
   everything that speaks, a monospace for everything that labels or measures.
   NOTE: no webfonts ship (strict CSP, zero network). These are system stacks
   chosen so the grotesque lands on Helvetica Neue / Arial and the mono on
   SF Mono / Cascadia / Consolas. See readme.md "Font substitution". */
:root{
  --font-grotesk:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  /* display — landing hero, profile name, 404 code */
  --type-display-1:clamp(2.75rem,9vw,5.5rem);
  --type-display-2:clamp(2rem,6vw,3.25rem);
  --type-display-3:1.75rem;
  --tracking-display:-0.035em;
  --leading-display:0.94;

  /* body */
  --type-body-lg:1.0625rem;   /* 17px — bio, landing subhead */
  --type-body:0.9375rem;      /* 15px — default UI text */
  --type-body-sm:0.8125rem;   /* 13px */
  --leading-body:1.5;
  --tracking-body:-0.008em;

  /* mono — labels, metrics, nav, buttons, URLs */
  --type-mono-lg:1.0625rem;
  --type-mono:0.8125rem;
  --type-mono-sm:0.6875rem;   /* 11px, uppercase only */
  --tracking-mono:0.08em;
  --tracking-label:0.16em;

  /* numerals: tabular everywhere a number can change */
  --numeric:tabular-nums; /* @kind other */

  --weight-regular:400;
  --weight-medium:500;
  --weight-bold:700;
}

/* tokens/spacing.css */
/* 4px base. Surfaces use the named steps, never raw px. */
:root{
  --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;

  /* layout */
  --measure-profile:26rem;   /* 416px — public profile column */
  --measure-app:60rem;       /* 960px — dashboard / analytics */
  --measure-prose:34rem;
  --gutter:var(--s-5);
  --control-h:44px;          /* minimum tap target, mobile-first */
  --control-h-sm:34px;
}

/* tokens/effects.css */
/* Hard edges, hairlines, no ambient shadow. The only glow in the system is
   the focus ring. Depth is signalled by ground steps and 1px lines. */
:root{
  --radius-0:0px;
  --radius-1:3px;    /* inputs, buttons, badges */
  --radius-2:4px;    /* cards, link cards */
  --radius-pill:999px;

  --border:1px solid var(--line);
  --border-strong:1px solid var(--line-strong);
  --border-ink:1px solid var(--ink);

  --focus-ring:0 0 0 2px var(--ground),0 0 0 4px var(--focus);
  --focus-ring-tight:0 0 0 2px var(--focus);

  /* the only "shadow": a hard offset, used on the primary link card hover */
  --lift:3px 3px 0 0 var(--ink);
  --lift-accent:3px 3px 0 0 var(--accent);

  --scrim:color-mix(in oklab,var(--ground) 82%,transparent);
  --blur-panel:saturate(140%) blur(8px); /* @kind other */
}

/* tokens/motion.css */
/* One curve, two durations. Nothing bounces, nothing scales up.
   Press = 1px down. Hover = line and ground shift. */
:root{
  --ease:cubic-bezier(0.2,0,0,1); /* @kind other */
  --dur-1:90ms; /* @kind other */
  --dur-2:160ms; /* @kind other */
  --dur-3:280ms; /* @kind other */
  --press:translateY(1px); /* @kind other */
  --dither-step-fps:11; /* @kind other */
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-1:0ms; /* @kind other */ --dur-2:0ms; /* @kind other */ --dur-3:0ms /* @kind other */}
}

/* tokens/base.css */
/* Nested theme scopes: any element carrying data-theme below <html> must also
   re-declare color, or it inherits the ink of the scope <body> resolved under. */
[data-theme]:not(html){color:var(--ink)}

/* Minimal reset + the primitives every surface repeats: body ground,
   selection, focus visibility, link colour. Kept small on purpose. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-grotesk);font-size:var(--type-body);line-height:var(--leading-body);letter-spacing:var(--tracking-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-weight:var(--weight-medium);letter-spacing:var(--tracking-display);line-height:var(--leading-display)}
p{margin:0}
a{color:var(--ink);text-decoration:none;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration:underline;text-decoration-color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--focus-ring)}
::selection{background:var(--accent);color:var(--on-accent)}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
.al-label{font-family:var(--font-mono);font-size:var(--type-mono-sm);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-3)}
.al-mono{font-family:var(--font-mono);font-size:var(--type-mono);letter-spacing:var(--tracking-mono);font-variant-numeric:var(--numeric)}
.al-hairline{width:100%;align-self:stretch;height:1px;margin:0;background:var(--line);border:0}
.al-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}