/* ==========================================================================
   Lorena A. Barba Group — Design Tokens
   v0.1 — single source of truth for color, type, and spacing.
   Reference these variables (e.g. var(--color-red)) in component CSS;
   never hardcode raw hex values. Change a value here, change it everywhere.

   Fonts: Merriweather and Source Sans 3 are both SIL OFL (libre).
   Load them however the surface allows, e.g. Google Fonts:
   https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Source+Sans+3:wght@400;600;700&display=swap
   ========================================================================== */

:root {
  /* Color — core */
  --color-red:         #CE2406;  /* primary: mark, icons, links, active states */
  --color-red-deep:    #A51D04;  /* hover / active / pressed */
  --color-red-wash:    #FBEAE6;  /* optional pale background tint, use sparingly */
  --color-ink:         #181712;  /* headings + body; a WARM near-black, not #000 */
  --color-paper:       #FFFFFF;  /* page + card background */
  --color-hairline:    #EAEBE6;  /* card borders, rules, dividers */
  --color-muted:       #787876;  /* meta text: dates, copyright, captions */
  --color-muted-soft:  #B4B4B2;  /* faint dividers, disabled states */
  --color-icon-hover:  #9C9C9A;  /* grey icons transition to on hover */

  /* Color — illustration accent only (never UI, links, or text) */
  --color-slate:       #546E7D;  /* the avatar's sketch-line blue */

  /* Type families */
  --font-serif: "Merriweather", Georgia, "Times New Roman", serif;
  --font-sans:  "Source Sans 3", "Source Sans Pro", system-ui,
                -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Type scale (18px body base, ~1.25 major-third ratio) */
  --text-meta:     0.875rem;  /* 14px */
  --text-body:     1.125rem;  /* 18px */
  --text-h3:       1.375rem;  /* 22px */
  --text-h2:       1.75rem;   /* 28px */
  --text-h1:       2.5rem;    /* 40px */
  --leading-body:  1.6;
  --tracking-caps: 0.08em;

  /* Spacing (4px base unit) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Surfaces */
  --card-border:   1px solid var(--color-hairline);
  --card-radius:   0;                 /* square corners */
  --card-padding:  var(--space-6);
  --grid-gutter:   var(--space-6);
}