/* ====================================================================
   THEME · ORCHARD · seven given colours, two jobs
   A cream desk under white paper, a mint bar over the text. The seven
   colours split along the two things this app has to say: greens do
   the interaction, oranges do the people. Rings, links, active tabs
   and checkboxes are a deep green; solid buttons are the same green
   going darker on hover; the washes carry a breath of it so a focused
   editor tints instead of graying. julia keeps an orange, far enough
   from the green that the two never trade places.

   Given: #fff0e5 cream (the desk, thinned) · #bddfcb mint (bar, wash,
   rules) · #92c9ad sage (soft accent, lines) · #4c9b71 green (accent
   line) · #ff9d68 apricot and #ffb67f peach (julia's line, the live
   edge) · #b2d671 lime, which has no role here and is left out: this
   app names two colours at a time, and a third loud one would have to
   take a job from one of them.

   SECOND PASS · the first one read weak on screen, so two things
   moved. The desk went up from #fff0e5 to #fff8f1, which keeps the
   warm cast and gives every word more ground under it, and the ink
   ramp went down a step at every stop.

   THIRD PASS · two more. The secondary inks went down again, because
   the ground that decides them is the mint bar and not the desk: the
   site description and the menu items sit up there in dim, and dim
   now reads 7.4 on the bar instead of 6.3. And the field fill went
   almost all the way back up, from #f6e2d1 to #fceee4: at the darker
   value an input read as a peach block on a cream page and bound to
   nothing. The rule under it draws the box now. The lowest value in
   the theme is 5.7:1, faint on the bar.

   None of the seven given colours is dark enough to write with. The
   deepest, the green #4c9b71, reaches 3.0:1 on the cream, which
   carries a fill and not a word. The text tones are therefore drawn
   from the palette rather than taken from it.

   Every colour, wash and radius of the app is one of these --tt-*
   tokens; nothing else owns a colour.
   ==================================================================== */
:root {
  color-scheme: light;

  /* surfaces · a thinned cream desk, white paper, mint bar. The field
     is the faintest warm tint: its edge is the rule under it, not the
     fill, so an input recesses instead of sitting on the page as a
     block of another colour */
  --tt-page:        #fff8f1;
  --tt-paper:       #ffffff;
  --tt-field:       #fceee4;
  --tt-fieldhover:  #f9e7da;
  --tt-bar:         rgba(189, 223, 203, .93);

  /* ink · derived, in the green-gray of the sage · 15.7 / 12.5 / 10.1
     / 7.7 against the desk, and 11.5 / 9.2 / 7.4 / 5.7 on the bar.
     The bar is the light ground: the site description and the menu
     items on it are dim, so dim is set by what that ground needs. */
  --tt-ink:         #16211b;
  --tt-inksoft:     #26332c;
  --tt-dim:         #31423a;
  --tt-faint:       #405448;
  --tt-slash:       #86b8a2;

  /* lines · a sage rule that carries on the desk, and a cream
     hairline under it */
  --tt-rule:        #9cc7b0;
  --tt-hair:        #efdccb;

  /* accent · the palette green three steps down, so a link can be
     read · 7.9 on the desk, 5.8 on the bar, 8.4 on white */
  --tt-accent:      #255740;
  --tt-accentloud:  #255740;
  --tt-accentsoft:  #92c9ad;
  --tt-accentwash:  #bddfcb;
  --tt-accentline:  #4c9b71;

  /* solid controls: deep green, darker green on hover */
  --tt-solid:       #255740;
  --tt-solidhover:  #1a4230;
  --tt-onsolid:     #ffffff;
  --tt-solidline:   rgba(255, 255, 255, .32);

  /* julia · the palette orange three steps down for her name, the
     palette orange itself for the line and the dot · 7.2 / 5.3 */
  --tt-julia:       #8a3d12;
  --tt-juliatint:   #ffe6d3;
  --tt-julialine:   #ffb67f;
  --tt-livetint:    #ffe6d3;
  --tt-liveline:    #ff9d68;
  --tt-livetext:    #8a3d12;

  /* depth · a breath of the accent green on both washes */
  --tt-shadow:      40 34 26;
  --tt-scrim:       rgba(24, 28, 22, .38);
  --tt-overlay:     26 32 26;
  --tt-lightbox:    rgba(18, 22, 18, .96);
  --tt-wash1:       rgba(37, 87, 64, .03);
  --tt-wash2:       rgba(37, 87, 64, .06);

  /* shape · one step rounder than paper's */
  --tt-radius:      5px;
  --tt-radius-pop:  9px;
  --tt-radius-pill: 999px;
  --tt-radius-img:  4px;
  --tt-tabw:        2px;
}