/* ============================================================
   TOKENS
   ============================================================
   Every color, typeface, radius and spacing value on the site
   lives here and nowhere else.

   To restyle the whole site, change values in this file only.
   If you find yourself writing a raw hex code or pixel value in
   base.css or components.css, it probably belongs here instead.
   ============================================================ */

:root {

  /* --- Color ------------------------------------------------
     Warm paper base with an aged-gold accent. The accent is used
     sparingly: relevance stars, active nav, focus rings, links.
     Anything that is not signalling relevance stays neutral.     */

  --bg:           #f7f5ef;   /* page background, warm paper       */
  --card:         #ffffff;   /* raised surfaces                   */
  --ink:          #171b22;   /* body text, primary buttons        */
  --muted:        #5b6472;   /* secondary text                    */
  --muted-2:      #8b93a1;   /* tertiary text, metadata           */
  --accent:       #b8863c;   /* gold, borders and stars           */
  --accent-ink:   #7a5726;   /* gold, text-safe contrast          */
  --accent-soft:  #f3e6cf;   /* gold, tinted fills                */
  --border:       #e6e2d8;   /* hairlines                         */
  --star:         #b8863c;   /* relevance marker                  */

  /* --- Type -------------------------------------------------
     Two families, clearly distinct. Serif carries names and
     headings, sans carries everything read at length.            */

  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --fs-display:  38px;  /* quiz headline                          */
  --fs-name:     34px;  /* resume name                            */
  --fs-h2:       22px;
  --fs-lead:   16.5px;
  --fs-body:   14.5px;
  --fs-small:  13.5px;
  --fs-micro:  12.5px;

  /* --- Layout -----------------------------------------------  */

  --measure:    880px;  /* max content width                      */
  --gutter:      24px;
  --radius:      14px;  /* large surfaces                         */
  --radius-sm:   12px;  /* cards                                  */
  --radius-xs:    8px;  /* buttons                                */

  --space-1:  6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 20px;
  --space-5: 30px;
  --space-6: 50px;

  color-scheme: light;
}