/* The studio's constitution — every value the interface renders.

   This is a transfer of the Sindhorn Midtown app's method, not a copy of its
   library: the core alongside this file names only the thirteen components
   this editor actually has, and the values below are what make them look like
   they came from the same hand. Token names follow the app's so that anyone
   reading both recognises the same vocabulary.

   The document is not governed here. The flyers have their own constitution,
   scoped to .sheet, because one page hosts two identities: the tool and the
   thing the tool makes. */
:root{

  /* ---- Ground and ink ---------------------------------------------------
     The app's, taken as they stand. Nothing about a flyer editor argues for
     a different ground than the product it sits beside. */
  --app-ground:#241e2e;              /* the canvas the sheet floats on */
  --app-text:#faf7f5;                /* 13.4:1 */
  --app-muted:rgba(250,247,245,.70); /* the app's .70, its readability floor */
  --app-line:rgba(250,247,245,.13);
  --app-line-strong:rgba(250,247,245,.24);  /* the edge a control takes on hover */
  --app-inset-fill:rgba(250,247,245,.06);   /* the face of a control */
  --app-hover-fill:rgba(250,247,245,.10);
  --app-active-fill:rgba(250,247,245,.17);
  --app-danger:#e8908a;                     /* a field that will not accept what is in it */

  /* Brass, and the one value deliberately not the app's: the accent is the
     only colour that also prints, so an interface highlighting in citron
     while its output printed brass would read as two products.

     Light, because the app's accent is light. Its citron sits at the pale end
     precisely so it can be spent as text on a dark ground, and #b28e38 could
     not: accent text measured 4.27:1 on a surface and 3.71:1 on its own tint,
     because a translucent fill lifts the ground under it. This is the same
     hue at the step that clears 4.5:1 on the worst of them - 6.69:1 on the
     bare ground. The page keeps #8f722d, which is what prints on white. */
  --app-accent:#c7a24c;
  /* The accent's own channels, so a tint can be mixed from it. The app spends
     the accent on text, thin marks and the focus ring, and reaches for a
     translucent step - .08 to .55 - wherever it needs presence without
     weight. A solid accent fill there is a 7px dot or a 3px rule, never a
     button. This constitution follows that. */
  --app-accent-rgb:199,162,76;

  /* ---- The material -----------------------------------------------------
     One blur, two weights. A floating thing sits over arbitrary content and
     carries more pigment. The app's values exactly. */
  --app-glass-fill:rgba(46,39,59,.30);
  --app-glass-overlay-fill:rgba(38,32,49,.72);
  --app-glass-border:rgba(250,247,245,.14);
  --app-glass-filter:blur(18px) saturate(1.18);
  --app-glass-scrim-fill:rgba(14,11,19,.55);
  --app-glass-scrim-filter:blur(7px);

  /* ---- Shape ------------------------------------------------------------
     Rounded, never circular. A circle is admitted only where it draws a
     natural thing, and nothing in this interface draws one. */
  --radius-surface:14px;
  --radius-inset:10px;
  --radius-tight:8px;
  --radius-dialog:24px;

  /* ---- Control heights --------------------------------------------------- */
  --control:40px;
  --control-row:52px;
  --size-icon-control:36px;
  /* The canvas keeps a floor on a phone so the sheet has somewhere to be
     while the document is still arriving. */
  --canvas-floor:300px;

  /* ---- Space ------------------------------------------------------------
     Seven steps absorb the sixteen distinct paddings the chrome had grown. */
  --space-2:4px;
  --space-3:8px;
  --space-4:10px;
  --space-5:12px;
  --space-7:20px;
  --space-8:24px;

  /* ---- Type -------------------------------------------------------------
     Four steps. The interface says less than the page and needs fewer. */
  --type-small:11px;
  --type-body:12px;
  --type-lead:14px;
  --type-title:20px;
  --leading-tight:1.2;
  --leading-body:1.5;

  /* Weight and tracking. The family gives two faces, so the interface has two
     weights; the tracked label is the flyers' own rule, carried in rather than
     a second one invented for the chrome. */
  --weight-regular:400;
  --weight-bold:600;
  --tracking-label:.16em;

  /* ---- Motion ------------------------------------------------------------ */
  --motion-fast:160ms;
  --motion-ms:280ms;
  --motion-ease:cubic-bezier(.22,1,.36,1);
}

@media (prefers-reduced-motion:reduce){
  :root{--motion-fast:1ms;--motion-ms:1ms}
}