/* ContextEA design tokens — Brand Guidelines v1.1 (2026-09-03).
   Single source of truth. Import with <link rel="stylesheet" href="tokens.css">.
   Rebuild: python3 _build/build_tokens.py */
:root{
  /* 2a — Brand palette: Ink & Vermillion */
  --ink:#14161A; --ink-2:#2A2E36; --ink-3:#4A4F58; --ink-4:#6E747E;
  --ground:#F6F2EA; --ground-2:#EBE5D8; --ground-3:#DED7C6;
  --accent:#C8362A; --accent-2:#8A2118; --accent-3:#E96A5E;
  /* 2b — Product signal palette (in-app only; never on brand surfaces) */
  --signal-verified:#3A6B54; --signal-verified-tint:#E3ECE6;
  --signal-pending:#8A6A2C;  --signal-pending-tint:#EEE7D6;
  --signal-info:#3C5A78;        --signal-info-tint:#E1E6EC;
  --signal-blocked:#8A2118;  --signal-blocked-tint:#F2DEDC;
  /* Type families */
  --font-display:"Inter",ui-sans-serif,system-ui,sans-serif;
  --font-text:"Inter",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Size ramp (px) and line-heights */
  --fs-display-lg:56px; --lh-display-lg:60px;
  --fs-display:40px;    --lh-display:44px;
  --fs-h1:32px;         --lh-h1:36px;
  --fs-h2:22px;         --lh-h2:28px;
  --fs-h3:18px;         --lh-h3:24px;
  --fs-body:16px;       --lh-body:24px;
  --fs-small:13px;      --lh-small:20px;
  --fs-eyebrow:11px;    --lh-eyebrow:14px;
  --fs-mono:14px;       --lh-mono:22px;
  /* Spacing (4px base) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  /* Radii — the mark has none; UI containers may */
  --radius-sm:2px; --radius-md:4px; --radius-lg:8px;
  /* Rules */
  --line:1px solid #DED7C6; --line-strong:1px solid var(--ink);
  --wm-track-context:-0.028em; --wm-track-ea:-0.025em;
}


/* ---- Fonts (OFL-1.1) ---- */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/InterVariable.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:italic;font-weight:100 900;font-display:swap;src:url(/fonts/InterVariable-Italic.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/JetBrainsMono-Regular.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/JetBrainsMono-Medium.woff2) format("woff2")}

/* ---- Type utilities ---- */
.t-display-lg{font-family:var(--font-display);font-size:var(--fs-display-lg);line-height:var(--lh-display-lg);font-weight:600;letter-spacing:-0.02em;font-optical-sizing:auto;}
.t-display{font-family:var(--font-display);font-size:var(--fs-display);line-height:var(--lh-display);font-weight:600;letter-spacing:-0.02em;}
.t-h1{font-family:var(--font-display);font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:600;letter-spacing:-0.015em;}
.t-h2{font-family:var(--font-display);font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:600;letter-spacing:-0.01em;}
.t-h3{font-family:var(--font-text);font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:600;letter-spacing:-0.005em;}
.t-body{font-family:var(--font-text);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400;}
.t-small{font-family:var(--font-text);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:500;letter-spacing:0.02em;}
.t-eyebrow{font-family:var(--font-text);font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow);font-weight:600;letter-spacing:0.10em;text-transform:uppercase;}
.t-mono{font-family:var(--font-mono);font-size:var(--fs-mono);line-height:var(--lh-mono);font-weight:500;}

/* ---- Wordmark (live-text version; use logo/*.svg wherever outlines are required) ----
   One word. Context upright ink, EA italic vermillion. Both treatments always together. */
.wm{font-family:var(--font-display);font-weight:600;font-optical-sizing:auto;color:var(--ink);white-space:nowrap;letter-spacing:var(--wm-track-context);display:inline-block;line-height:1;}
.wm::after{content:"EA";font-style:italic;color:var(--accent);letter-spacing:var(--wm-track-ea);}
.wm-lg{font-size:64px;} .wm-md{font-size:32px;} .wm-sm{font-size:18px;}
.wm--on-ink{color:var(--ground);}
.wm--cli{color:var(--accent);} .wm--cli::after{color:var(--ground);}

/* ---- Status pills — product surfaces only ---- */
.pill{display:inline-block;font-family:var(--font-text);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600;letter-spacing:0.04em;text-transform:uppercase;padding:0 var(--space-2);border-radius:var(--radius-sm);}
.pill--verified{color:var(--signal-verified);background:var(--signal-verified-tint);}
.pill--pending{color:var(--signal-pending);background:var(--signal-pending-tint);}
.pill--info{color:var(--signal-info);background:var(--signal-info-tint);}
.pill--blocked{color:var(--signal-blocked);background:var(--signal-blocked-tint);}
.pill--solid.pill--verified{color:var(--ground);background:var(--signal-verified);}
.pill--solid.pill--pending{color:var(--ground);background:var(--signal-pending);}
.pill--solid.pill--info{color:var(--ground);background:var(--signal-info);}
.pill--solid.pill--blocked{color:var(--ground);background:var(--signal-blocked);}

/* ---- Motion — functional only ---- */
:root{--motion-state:200ms cubic-bezier(0.2,0,0,1);--motion-enter:160ms cubic-bezier(0.2,0,0,1);}
@keyframes verify-pulse{0%{opacity:1}50%{opacity:0.35}100%{opacity:1}}
.verify-pulse{animation:verify-pulse 200ms ease-out 1;} /* ratification square, once, on verify-pass */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}