/* ─── Design tokens ─────────────────────────────────────────
   stqn.tech / stan.boyet.me shared design system
   Import this first, before any other stylesheet.
   Fonts are self-hosted: copy the fonts/ folder alongside.
──────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/gabarito-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/gabarito-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/figtree-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/figtree-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Ground and inks (contrast measured on --bg) */
  --bg:          #F5F1EA;
  --text:        #17130F;   /* headings, strong text */
  --body:        #2A241E;   /* running text, 13.6:1 */
  --muted:       #4E443A;   /* secondary text, 8.4:1 */
  --faint:       #5E5348;   /* footer, captions, 6.6:1 */
  --brick:       #A02E14;   /* links, accents, 6.4:1 */
  --brick-deep:  #7A200B;   /* link hover */
  --mustard:     #F0B429;   /* fills and highlights only, never text */
  --mustard-soft:#FBE7B2;   /* hover washes, soft fills */
  --rule:        #CDBBA6;   /* hairlines */
  --wash:        #EBE2D3;   /* quiet fills */
  --pass:        #2F8A4B;
  --fail:        #C8341B;

  /* Type */
  --head: 'Gabarito', 'Figtree', system-ui, sans-serif;
  --sans: 'Figtree', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Layout */
  --col:  680px;    /* reading column */
  --wide-max: 1040px;   /* grid breakouts */

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}