/* ── Design tokens: the only place colours, sizes, and motion are defined ── */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=Instrument+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap");

:root {
  /* type families */
  --font-display: "Bricolage Grotesque", sans-serif;
  --font-body: "Instrument Sans", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* type scale (13/14/16/20/28/40) */
  --t-13: 13px;
  --t-14: 14px;
  --t-16: 16px;
  --t-20: 20px;
  --t-28: 28px;
  --t-40: 40px;

  /* colour — light theme */
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --ink: #16150F;
  --muted: #6E6B63;
  --line: #E8E6E0;
  --accent: #0E6B4A;
  --accent-ink: #FFFFFF;
  --warn: #B4540A;
  --error: #B42318;

  /* status tints */
  --published-bg: #E7F4EE; --published-ink: #0E6B4A;
  --processing-bg: #FFF4E5; --processing-ink: #B4540A;
  --failed-bg: #FDECEA; --failed-ink: #B42318;
  --draft-bg: #EFEEE9; --draft-ink: #6E6B63;

  /* spacing (8px grid) */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 40px; --s-6: 48px;
  --gutter: 32px;
  --card-pad: 24px;
  --control-h: 40px;
  --maxw: 1100px;

  /* shape */
  --r-card: 10px;
  --r-control: 8px;
  --r-chip: 999px;

  /* borders / shadows */
  --hover-shadow: 0 4px 16px rgba(22, 21, 15, 0.06);

  /* motion */
  --dur-hover: 150ms;
  --dur-panel: 250ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --focus: 2px solid var(--accent);
}