/* Theo — the roasted shop's type and colour.

   One file so every page of the shop (the home page, checkout, the order page,
   the policies) carries the same face and the same colours.

   Set the way the houses it is measured against set theirs — Apple, Samsung,
   Rolex, Nespresso, Loro Piana: one sans for everything, headlines in its
   semibold, labels in sentence case rather than spaced capitals, warm
   near-black on warm off-white, one quiet accent, and almost no shadow.
   The face is Mona Sans (SIL Open Font Licence, github.com/github/mona-sans),
   one variable file per script range, every weight from 300 to 700.

   Colours are RGB channels so a page can write rgb(var(--c-ink) / .5); the
   plain-CSS pages use the ready-made aliases at the bottom instead.          */

@font-face{font-family:'Mona Sans';src:url('/fonts/monasans-latin.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;
  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}
/* the second range carries ₹ */
@font-face{font-family:'Mona Sans';src:url('/fonts/monasans-latin-ext.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;
  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{
  /* espresso is the strongest ink, cream a light plate, paper a card on it,
     night the dark ground; bone and ember are type and accent ON that ground,
     which stays dark in either theme. All warm: coffee, not mint. */
  --c-espresso:29 27 24; --c-ink:66 61 56; --c-mute:112 106 99;
  --c-cream:250 248 245; --c-paper:242 239 234; --c-sand:226 221 213;
  --c-night:12 11 10; --c-bone:245 243 239;
  --c-clay:139 94 60; --c-ember:214 182 148;
  --c-bad:168 58 46; --c-good:52 128 86;

  /* one face; the old names stay so every rule that names them follows */
  --f-sans:'Mona Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --f-display:var(--f-sans); --f-body:var(--f-sans); --f-mono:var(--f-sans); --f-grot:var(--f-sans);

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-h:cubic-bezier(.2,.7,.3,1);
  --ease-tone:cubic-bezier(.45,.05,.55,.95);
  --r-plate:40px; --r-card:20px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --c-espresso:242 239 234; --c-ink:200 195 188; --c-mute:150 144 137;
  --c-cream:19 18 17; --c-paper:29 28 26; --c-sand:54 51 47;
  --c-night:8 8 7; --c-clay:214 182 148; --c-bad:232 132 112;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --c-espresso:242 239 234; --c-ink:200 195 188; --c-mute:150 144 137;
  --c-cream:19 18 17; --c-paper:29 28 26; --c-sand:54 51 47;
  --c-night:8 8 7; --c-clay:214 182 148; --c-bad:232 132 112;
  color-scheme:dark;
}

/* aliases for the plain-CSS pages */
:root{
  --esp:rgb(var(--c-espresso)); --ink:rgb(var(--c-ink)); --mute:rgb(var(--c-mute));
  --cream:rgb(var(--c-cream)); --paper:rgb(var(--c-paper)); --sand:rgb(var(--c-sand));
  --clay:rgb(var(--c-clay)); --bad:rgb(var(--c-bad)); --live:rgb(var(--c-good));
  --line:rgb(var(--c-espresso) / .1); --white:rgb(var(--c-cream));
}

/* the logo every plain page shares, inverted on a dark theme */
.theo-logo{display:block;height:27px;width:auto}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theo-logo{filter:invert(1)}}
:root[data-theme="dark"] .theo-logo{filter:invert(1)}