/* ==========================================================================
   rezaali.my — design tokens
   The palette lives here and nowhere else. Changing the site's colours means
   editing this file; no other file contains a colour value.
   Direction: A "Letterhead" — warm paper, ink text, one accent.
   Contrast (WCAG, against --paper): ink 15.7:1 · muted 5.8:1 · accent 11.5:1
   ========================================================================== */

:root {
  /* ---- colour ---------------------------------------------------------- */
  /* Direction: white paper, ink text, one accent. Decided 2 Oct 2026.
     The palette is deliberately tiny: one accent, used only for links and the
     current nav item. Rules stay decorative and never carry text.          */
  --paper:        #ffffff;
  --ink:          #14161a;
  --muted:        #5a6068;   /* dates, captions, secondary lines  — 6.4:1  */
  --rule:         #e2e2e0;   /* hairlines — decorative only, never text    */
  --accent:       #14375c;   /* links and the current nav item    — 12.1:1 */
  --rule-strong:  #bcbcb8;   /* the heavier divider under the hero band    */
  --paper-sunk:   #f1f1ef;   /* the placeholder tint, used sparingly       */

  /* ---- type ------------------------------------------------------------ */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono:  ui-monospace, Menlo, Consolas, monospace;

  --size-body:      1.125rem;  /* 18px */
  --size-small:     0.8125rem;
  --size-nav:       0.9375rem;
  --size-h1:        2.125rem;  /* 34px */
  --size-h2:        1.5rem;
  --size-wordmark:  1.6875rem;
  --leading-body:   1.62;

  /* ---- geometry -------------------------------------------------------- */
  --rail-width:   20rem;       /* 320px, from seths.blog's measured CSS     */
  --measure:      46.25rem;    /* 740px reading column                      */
  --gutter:       5.625rem;    /* 90px either side of the column            */
  --rail-pad:     2.5rem;
  --hero-height:  10.625rem;   /* 170px full-bleed band                     */
  --space-block:  1.375rem;

  /* ---- breakpoints (documented; CSS cannot use vars in media queries) --- */
  /* 768px  : rail unpins to a static block above the content               */
  /* 1100px : gutters tighten                                                */
}