/* Portfolio design tokens: Charcoal & Saffron
   Contrast notes: saffron is for charcoal backgrounds and fills only (1.8:1 on white).
   On white, the accent is ochre (5.9:1). */

/* Fonts: self-hosted from assets/fonts (SIL Open Font License, see the LICENSE files there).
   Latin subset only. Source Serif 4 is the variable file with the optical size axis,
   so headings look the same as they did with Google Fonts. */
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;
  src:url(../fonts/source-serif-4-latin-opsz-normal.woff2) format('woff2-variations'),url(../fonts/source-serif-4-latin-opsz-normal.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/lato-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:italic;font-weight:400;font-display:swap;
  src:url(../fonts/lato-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/lato-latin-700-normal.woff2) format('woff2')}

:root{
  /* Color */
  --charcoal:#1E2126;
  --charcoal-2:#2A2E35;
  --line-dark:#3D424B;
  --ink:#1F2329;
  --body:#2B2F36;
  --muted:#5F6672;
  --muted-dark:#B8BDC6;
  --soft-dark:#D5D8DE;
  --saffron:#F2B544;
  --saffron-hover:#E6A52F;
  --ochre:#8A5A10;
  --ochre-hover:#6B4409;
  --cream:#FBF3E2;
  --mist:#F2F3F5;
  --rule:#DCDFE4;
  --edge:#7D8490;
  --paper:#FFFFFF;

  /* Icon duotone fills */
  --tone-light:#F6D58F;
  --tone-dark:#6E5424;
  --tone-on-saffron:#FBE3AE;

  /* Type */
  --display:'Source Serif 4',Cambria,Georgia,serif;
  --sans:'Lato',Calibri,'Segoe UI',system-ui,sans-serif;
  --h1:clamp(2.5rem,6vw,4.5rem);        /* 72 */
  --h2:clamp(1.9rem,3.6vw,2.75rem);     /* 44 */
  --h3:clamp(1.3rem,2vw,1.625rem);      /* 26 */
  --stat:clamp(3.5rem,7vw,5.5rem);      /* 88 */
  --lead:clamp(1.125rem,1.6vw,1.3125rem);/* 21 */
  --text:1.125rem;                      /* 18 */
  --small:1.0625rem;                    /* 17 */
  --caption:.875rem;                    /* 14 */
  --label:.8125rem;                     /* 13 */

  /* Space and shape */
  --page:1440px;
  --gutter:clamp(16px,5vw,72px);
  --gap:24px;
  --radius:20px;
  --radius-lg:24px;
  --section:clamp(56px,7vw,96px);

  color-scheme:light;
}