/* ============================================================
   ArticleSift — Design Tokens (06-design source of truth)
   Direction: "Printed Page" — editorial print aesthetic.
   The site itself reads like a well-typeset A4 printout:
   paper background, ink text, hairline rules, printer's-red
   accent, zero gradients, zero glassmorphism.
   ============================================================ */

:root {
  /* --- Type --- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;      /* headings, brand, numerals */
  --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;    /* UI + body text */
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;/* URL input, codes, metadata */

  --fs-xs:   0.75rem;    /* 12 — fine print, badges */
  --fs-sm:   0.8125rem;  /* 13 — captions, small print */
  --fs-base: 1rem;       /* 16 — body */
  --fs-md:   1.125rem;   /* 18 — subhead, lead */
  --fs-lg:   1.375rem;   /* 22 — card titles */
  --fs-xl:   1.75rem;    /* 28 — H2 mobile */
  --fs-2xl:  2.25rem;    /* 36 — H2 desktop / H1 mobile */
  --fs-3xl:  3rem;       /* 48 — H1 desktop */

  --lh-tight: 1.15;
  --lh-snug: 1.4;
  --lh-body: 1.65;

  /* --- Color: paper & ink, no purple/blue/white SaaS template --- */
  --paper:        #FBFAF6;  /* page background — warm paper */
  --paper-raised: #FFFFFF;  /* cards / result sheet — a fresh sheet of A4 */
  --ink:          #1C1917;  /* primary text — printer's ink */
  --ink-soft:     #57534B;  /* secondary text */
  --ink-faint:    #8A857B;  /* captions, fine print */
  --rule:         #E3DFD4;  /* hairline rules */
  --rule-strong:  #C9C3B4;

  --accent:       #C2401F;  /* printer's red — CTAs, links-on-paper, registration marks */
  --accent-ink:   #9C2F13;  /* accent hover/active */
  --accent-wash:  #FBEAE4;  /* accent tint background */

  --ok:           #2F6B45;  /* success states */
  --ok-wash:      #E9F3EC;
  --warn:         #96660F;  /* neutral notice (What we can't access — NOT red, per 04/05) */
  --warn-wash:    #F7F0DF;
  --err:          #A8232E;  /* conversion errors */
  --err-wash:     #F9E9EA;

  --focus:        #1D4ED8;  /* focus ring only — never decorative */

  /* --- Spacing (8pt grid) --- */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;

  /* --- Layout --- */
  --measure: 40rem;        /* 640px article measure */
  --container: 70rem;      /* 1120px */
  --radius: 4px;           /* small, consistent — no big rounded SaaS cards */
  --radius-pill: 999px;    /* badges only */

  /* --- Elevation: none. Sheets use 1px rule + optional 2px bottom edge --- */
  --sheet-edge: 0 1px 0 0 rgba(28,25,23,.04);
}

/* Breakpoints (mobile-first):
   sm  ≥ 480px   (large phones)
   md  ≥ 768px   (tablets)
   lg  ≥ 1024px  (desktop)
   xl  ≥ 1280px  (wide)
*/