/* Design tokens — mirrors the design canvas exactly.
   Change a value here and it changes everywhere. */
:root {
  /* Ground & ink */
  --bone:        #F3EBDD;   /* parchment, one shade lighter */
  --card:        #FAF6EE;   /* warm white — same temperature as the ground, just lighter */
  --white:       #FFFFFF;
  --card-tint:   #E5D9C2;   /* secondary tinted block */
  --ink:         #1F1D1A;
  --ink-soft:    #4A443B;
  --muted:       #6B6459;

  /* Teal — primary */
  --teal:        #2D4F4A;   /* 9:1 on white, safe for button text */
  --teal-line:   #4A7A73;   /* pattern strokes on cream */
  --teal-pale:   #8FB5AE;   /* ornament on teal ground */
  --teal-text:   #B3CBC6;   /* secondary text on teal ground */
  --teal-patt:   #5F8F87;   /* pattern strokes on teal ground */

  /* Brass — links and pattern accents only, never a text background */
  --brass:       #8A5F2B;   /* 5.1:1 on bone */
  --brass-dark:  #5E3F1A;

  /* Rules */
  --line:        #D6C8AE;
  --line-strong: #C2B191;
  --line-soft:   #E8E0D1;

  /* Type */
  --display: "Newsreader", Georgia, serif;
  --body:    "Karla", system-ui, sans-serif;
  --arabic:  "Amiri", serif;

  /* Rhythm */
  --gutter: 80px;
  --gutter-sm: 20px;
  --radius: 3px;
}

@media (max-width: 720px) {
  :root { --gutter: var(--gutter-sm); }
}