/*
  TheAgency — design tokens
  Mirrors the ACSS variable model (see references/frameworks/automatic-css.md)
  so this maps cleanly onto the real ACSS install when rebuilt in EtchWP.
  Do not hand-roll new one-off colors/sizes anywhere else — extend here.
*/

:root {
  /* ---- accent (ACSS: --primary / --primary-dark) ---- */
  --acc: #FF4C1C;
  --acc-ink: #FF4C1C;
  --acc-hover: #D93F14;
  --acc-wash: #FCEFE9;
  --acc-line: #F5D9CB;

  /* ---- ink / text (ACSS: --base + shades) ---- */
  --ink: #12151A;
  --ink-soft: #3A424C;
  --body: #45505C;
  --muted: #5B6472;
  /* 4.9:1 on white (was #8B939D at 3.1:1) */
  --faint: #6B7280;

  /* ---- surface (ACSS: --neutral + shades) ---- */
  --page: #FFFFFF;
  --raised: #F6F7F8;
  --inset: #FBFCFD;
  --line: #E2E5E9;
  --line-soft: #EEF0F3;
  --header-line: #E7EAEE;

  /* ---- signal (semantic palette) ---- */
  --success: #16A34A;
  --success-bg: #F0FDF4;
  --success-line: #BBF7D0;
  --live: #4ADE80;

  /* ---- type (ACSS: --h1..--h6 / --text-*) ---- */
  --font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --h1: clamp(2.25rem, 1.9rem + 1.6vw, 3.75rem);
  --h1-tight: clamp(2rem, 1.7rem + 1.3vw, 3.375rem);
  --h2: clamp(1.75rem, 1.55rem + 0.9vw, 2.375rem);
  --h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.4375rem);

  --text-xl: 1.15625rem;   /* 18.5px lead paragraph */
  --text-l: 1.03125rem;    /* 16.5px body */
  --text-m: 0.9375rem;     /* 15px */
  --text-s: 0.8125rem;     /* 13px */
  --text-xs: 0.6875rem;    /* 11px labels */

  /* ---- spacing (ACSS: --space-{xs..xxl}) ---- */
  --space-xs: 0.25rem;   /* 4 */
  --space-s: 0.5rem;     /* 8 */
  --space-m: 0.875rem;   /* 14 */
  --space-l: 1.25rem;    /* 20 */
  --space-xl: 1.625rem;  /* 26 */
  --gutter: 2.5rem;      /* 40 */
  --space-sub: 3.75rem;  /* 60 */
  --section-space: 5.25rem;   /* 84-96 */
  --space-xxl: 7.5rem;   /* 120 */

  /* ---- layout ---- */
  --content-width: 1180px;
  --content-width-narrow: 820px;
  --content-width-form: 780px;

  /* ---- radius / border (ACSS: --radius / --border) ---- */
  --radius-s: 4px;
  --radius: 5px;
  --radius-l: 6px;
  --border: 1px solid var(--line);
  --border-soft: 1px solid var(--line-soft);

  /* ---- motion ---- */
  --transition-duration: .18s;
  --transition-timing: ease;
}