/* The flyers' constitution — every value the printed page renders.

   Scoped to .sheet rather than :root, because one page hosts two identities:
   the tool and the document it makes. The studio's constitution owns the
   interface; nothing here reaches it and nothing there reaches the paper.
   That boundary is not a nicety - .contact-name reads --ink, and when the
   chrome went dark without this file the flyer's contact line turned warm
   white on white paper.

   Writing it down surfaced a mix worth naming: some values inside the sheet
   describe the document (its ink, its type scale) and some describe editing
   it (the tint on a selected cell, the hover overlay on a photograph). The
   second group is the tool wearing paper, so it is marked and kept apart.

   These are the values as the document already renders them. Nothing here
   is a new decision. */
.sheet{

  /* ---- The document's own -----------------------------------------------
     Ink, and the two greys that carry a caption and a rule. */
  --ink:#302b32;
  --muted:#726e72;
  /* Four hairlines, because the page draws four. Naming them is not a
     decision - it is the record that an offer's rule, a table row's, a
     reservation block's and the terms' are four different greys where one
     or two would do. Changing that is a design decision for another day;
     this file only stops them being anonymous. */
  --rule-offer:#c3b6c1;             /* the line under an offer */
  --rule-row:#cfc5cd65;             /* between table rows */
  --rule-reservation:#bfb3bd40;     /* above the reservation block */
  --rule-terms:#c5bcc4;             /* above the terms */
  --paper:#fffefa;                  /* warm white: hero text on a photograph */
  --sheet:#ffffff;                  /* the page itself, white so it prints white */
  --hero-ground:#342837;            /* what shows before a photograph loads */

  /* Brass is written per story at runtime - each flyer carries its own colour
     and app-html sets --accent on the sheet - so this is the value they all
     currently hold, and the floor if a story ever arrives without one. */
  --accent:#8f722d;

  /* ---- Type -------------------------------------------------------------
     Eight steps, unchanged. Reading text is fixed at 11px and does not
     compress: the fit loop moves space, never type. */
  --doc-caption:8.5px;              /* terms, notes, captions */
  --doc-table:9.5px;                /* table heads, column subheads */
  --doc-label:10px;                 /* the all-caps eyebrow */
  --doc-body:11px;                  /* reading text */
  --doc-lead:12px;
  --doc-title:14px;
  --doc-section:26px;               /* a Didot section heading */
  --doc-figure:40px;
  --doc-display:66px;               /* the hero title */

  /* Tracking is size and case, never block: Didot at 40px and up takes the
     display value, an all-caps Avenir label takes the label value, and
     everything else takes none. */
  --doc-tracking-display:-.022em;
  --doc-tracking-label:.23em;

  --doc-weight-regular:400;
  --doc-weight-bold:600;

  --doc-leading-body:1.5;
  --doc-leading-tight:1.4;

  /* ---- Editing affordances ----------------------------------------------
     Not the document. These are the tool showing through the paper while
     someone works, and none of them survives to print. */
  --edit-frame:#e4dee2;             /* an empty photograph frame */
  --edit-frame-deep:#ccc5cb;
  --edit-frame-ink:#584b56;
  --edit-focus:#d7b8ce22;           /* the field you are typing in */
  --edit-hover:#af96a9;
  --edit-caret:#ab728c;
  --edit-cell:#eadde6;              /* the selected table cell */         /* the drop target */              /* "replace, reposition, or drop one in" */
}