/* tokens.css: one source for the blog's colour, type, space and shape (the Site na Conversa kit).
   Only the seven brand colours and the two utility colours exist here. Text and background are paired only as the
   kit allows:
     brick, ink or blue on cream; cream on brick, ink or blue
     ink or brick on honey; honey on brick or ink
     ink on grey or white (white and grey carry ink text only)
   The prévia brown and the aprovado green stay beside their own words, on cream.
   No shadows, no rotation, no tints. */

@font-face{font-family:Bricolage;src:url('/assets/bricolage-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'SNC Texto';src:url('/assets/snc-texto-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'SNC Texto';src:url('/assets/snc-texto-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  font-size:100%; /* the root follows the reader's browser text size; the reading size is set on body */
  color-scheme:light;
  scroll-padding-top:24px;

  /* colour */
  --cream:#FFF6E9;
  --brick:#8B3528;
  --ink:#2D2926;
  --honey:#F3C66A;
  --blue:#244A58;
  --previa:#76531C;
  --aprovado:#35574E;
  --grey:#D9D6D0;
  --white:#FFFFFF;

  /* type: Bricolage 700 from 24px up (headings only); SNC Texto 400 and 600 for everything else */
  --display:Bricolage,sans-serif;
  --body:'SNC Texto',sans-serif;
  --text:1.125rem;   /* reading text: 18px on phones, 20px from 900px */
  --lead:1.25rem;    /* the opening paragraph: 20px on phones, 24px from 900px */
  --small:1rem;      /* 16px reading text that is not a label (byline, captions, summaries); grows with «Texto maior» */
  --h1:2.75rem;      /* 44px; 40px at 380px and below, 56px from 600px, 66px from 900px */
  --h2:2.125rem;     /* 34px; 42px from 900px */
  --h3:1.625rem;     /* 26px */
  --track:-.025em;   /* headings */

  /* space and shape */
  --gutter:20px;     /* each side: 20px on phones, 24px at 380px and below, 32px from 600px */
  --radius-s:5px;    /* buttons, fields and small boxes */
  --radius-card:6px 6px 38px 6px;      /* the bubble corner (54px from 900px) */
  --bubble-in:24px 24px 24px 5px;      /* the honey bubble: a message received */
  --bubble-out:24px 24px 5px 24px;     /* the brick bubble: a message sent */
  --target:44px;     /* every target is at least 44 x 44px; main buttons are 56px */
}
@media(min-width:600px){:root{--gutter:32px;--h1:3.5rem}}
@media(min-width:900px){:root{--text:1.25rem;--lead:1.5rem;--h1:4.125rem;--h2:2.625rem;--radius-card:6px 6px 54px 6px}}
@media(max-width:380px){:root{--gutter:24px;--h1:2.5rem}}

/* «Texto maior»: texto-maior.js toggles this one class on <html>; nothing is stored.
   Reading text grows (18 to 22px on phones, 20 to 24px from 900px); headings, labels, buttons and navigation
   keep their size, so nothing overflows at 320px. */
html.texto-maior{--text:1.375rem;--lead:1.5rem;--small:1.1875rem}
@media(min-width:900px){html.texto-maior{--text:1.5rem;--lead:1.75rem;--small:1.25rem}}