:root{
/* ── Base palette ─────────────────────────────────────────────
   Three colours carry the whole brand: slate, terracotta, cream.
   Hex values sampled directly from the supplied logo artwork.   */

/* Slate — the voice colour. All type, all rules, all ink fills. */
--slate-900:#202C31;
--slate-800:#344B52;
--slate-700:#404E55;  /* CORE: logo wordmark "TRUE", all body copy */
--slate-600:#4E5D64;
--slate-500:#657072;  /* sampled from logo antialias band */
--slate-400:#8A9498;
--slate-300:#ABADA6;
--slate-200:#CBD0CE;
--slate-100:#E5E8E6;
--slate-050:#F3F5F4;

/* Terracotta — the accent. The arc, "ARC", rules, one thing per view. */
--terracotta-800:#8E4517;
--terracotta-700:#A8541F;
--terracotta-600:#C0632F;
--terracotta-500:#D8763F;  /* CORE: the arc, the dot, "ARC" */
--terracotta-400:#E1915F;
--terracotta-300:#EDD4BD;  /* sampled tint */
--terracotta-200:#F5E5D8;
--terracotta-100:#FBF3EC;

/* Cream — the warm ground. Never a type colour on white. */
--cream-600:#E4DBC4;
--cream-500:#F2ECDC;  /* CORE: logo square background */
--cream-400:#F7F3E9;
--cream-300:#FBF9F3;

--white:#FFFFFF;

/* Semantic — status. Derived in-family; deliberately desaturated. */
--green-600:#3F6B52;
--green-100:#E7EFEA;
--amber-600:#B07A24;
--amber-100:#F8EEDA;
--red-600:#A33A2C;
--red-100:#F6E4E0;
--info-600:#3D6373;
--info-100:#E4EDF1;

/* ── Semantic aliases — use these, not the ramps ─────────────── */
--text-heading:var(--slate-800);
--text-body:var(--slate-700);
--text-muted:var(--slate-500);
--text-faint:var(--slate-400);
--text-accent:var(--terracotta-500);
--text-inverse:var(--cream-500);
--text-inverse-muted:rgba(242,236,220,.66);
--text-on-accent:var(--white);

--surface-page:var(--white);
--surface-warm:var(--cream-500);
--surface-warm-soft:var(--cream-400);
--surface-card:var(--white);
--surface-ink:var(--slate-700);
--surface-ink-deep:var(--slate-900);
--surface-accent:var(--terracotta-500);
--surface-accent-soft:var(--terracotta-100);
--surface-subtle:var(--slate-050);

--border-hairline:var(--slate-200);
--border-hairline-warm:var(--cream-600);
--border-strong:var(--slate-400);
--border-accent:var(--terracotta-500);
--border-on-ink:rgba(242,236,220,.22);

--rule-accent:var(--terracotta-500);   /* the 1.5px hairline under every header */
--rule-quiet:var(--slate-200);

--focus-ring:var(--terracotta-500);

--status-positive-fg:var(--green-600);
--status-positive-bg:var(--green-100);
--status-caution-fg:var(--amber-600);
--status-caution-bg:var(--amber-100);
--status-negative-fg:var(--red-600);
--status-negative-bg:var(--red-100);
--status-neutral-fg:var(--info-600);
--status-neutral-bg:var(--info-100);
}

/* Ink scope — flip a whole section onto slate. Applied as a class or [data-ink]. */
.ta-ink,[data-ink]{
--text-heading:var(--cream-500);
--text-body:var(--cream-500);
--text-muted:rgba(242,236,220,.7);
--text-faint:rgba(242,236,220,.5);
--surface-page:var(--slate-700);
--surface-card:var(--slate-800);
--surface-subtle:var(--slate-600);
--border-hairline:rgba(242,236,220,.22);
--border-strong:rgba(242,236,220,.4);
--rule-quiet:rgba(242,236,220,.22);
}