/*
 * The design tokens.
 *
 * One dark theme, deliberately. A mail client is looked at for hours and the
 * body of a message brings its own colours with it, so the shell around it
 * stays quiet and consistent rather than competing.
 *
 * The surfaces are a real ramp rather than one flat black. Everything used to
 * be #0E0E11 on #050506 with a hairline between, which reads as a single sheet
 * with lines drawn on it — the sidebar, the list and the message all looked
 * like the same plane. Four steps of elevation is what lets a person see the
 * structure of the page without reading any of it.
 */
:root{
  /* Surfaces, darkest to lightest. */
  --ink:#08080B;          /* the page behind everything */
  --surface:#0F0F14;      /* sidebar, header */
  --raise:#16161D;        /* cards, rows on hover */
  --raise-2:#1E1E27;      /* inputs, pressed states */

  /* Lines. Two weights: one you are not meant to notice, one you are. */
  --line:rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.14);

  /* The accent. A ramp rather than one pink, so a hover, a fill and a tint are
     related instead of the same colour at different opacities. */
  --pink-300:#FF8FBC;
  --pink-400:#FF5C9E;
  --pink:#FF2E88;
  --pink-600:#E01A70;
  --pink-700:#A80F52;
  --pink-tint:rgba(255,46,136,.12);
  --pink-tint-strong:rgba(255,46,136,.20);

  /* Text, in the order you should reach for it. */
  --hi:#F5F5F7;
  --mid:#B9B9C4;
  --lo:#7E7E8B;

  /* States. */
  --ok:#5BD8A6;
  --warn:#F0B34A;
  --danger:#FF7A93;

  --mono:ui-monospace,'SF Mono','Cascadia Mono',Menlo,Consolas,monospace;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* A radius scale. Three values, used consistently: anything smaller than the
     control it sits inside looks like a mistake, and a page of arbitrary radii
     looks unfinished however carefully each one was chosen. */
  --r-sm:9px;
  --r:13px;
  --r-lg:20px;

  /* Shadows carry the elevation the surfaces imply. Long and soft, never a
     hard offset — on a near-black background a tight shadow reads as a border
     that has gone wrong. */
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.6);
  --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 24px 60px -12px rgba(0,0,0,.75);

  /* One easing for everything that moves, so the interface has a single
     temperament rather than a different one per component. */
  --ease:cubic-bezier(.2,.8,.3,1);
  --fast:.14s;
  --slow:.26s;

  --side:266px;
  /* The comfortable measure for a message body. Mail is prose, and prose set
     across 1600 pixels is prose nobody finishes. */
  --read-max:74ch;
}

*,*::before,*::after{box-sizing:border-box}