/* Design tokens: the look of the app. Blast Media theme on Drawbridge Mark II.

   This file replaces Drawbridge Base's app/static/tokens.css. It is a re-skin:
   every token name, and therefore every part, layout, size and spacing in
   app.css, is Mark II's own. Only the values below change: colour, type,
   radius and shadow, taken from Blast's quoting calculator
   (blastmediainc.github.io/quotingcalculator). The token map, with each
   derived value and its contrast, is look/tokens.md.

   Two themes, both whole: dark is the default; light is used when the
   browser asks for a light scheme (prefers-color-scheme). Every colour the
   app uses is defined here, once per theme; app.css uses only these tokens.
   The four signal colours (live, wait, bad, ok) each mean one thing and are
   used only for state; live is also the focus ring, as Blast's lime is the
   calculator's focus ring.

   One face, Lato (the calculator's), Regular and Bold as the calculator
   loads it, is bundled in app/static/fonts/: the LatoLatin webfonts of the
   project's own release (Lato 2.015, Lato2OFLWeb.zip from latofonts.com),
   unmodified, with its SIL Open Font License beside it. The [fonts] stacks
   in branding.toml (/branding.css) are its fallbacks. */

@font-face { font-family: "Lato"; src: url("fonts/LatoLatin-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/LatoLatin-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* Dark: the default. */
:root {
  color-scheme: dark;

  /* Grounds, from the page (g0) up to the top surface (g3) */
  --g0: #0e1316;   /* calculator --bg */
  --g1: #171e22;   /* calculator --panel */
  --g2: #1e272c;   /* calculator --field */
  --g3: #252f35;   /* derived: one step above --field */

  /* Text: ink for reading, ink2 secondary, ink3 labels; ink4 is a mark only */
  --ink:  #e9eff1;                    /* calculator --ink */
  --ink2: #bcc7cb;                    /* derived: between --ink and --mute */
  --ink3: #8f9fa6;                    /* calculator --mute */
  --ink4: rgba(233, 239, 241, 0.24);  /* derived: --ink at Mark II's 24% */

  /* Hairlines: dividers (hair) and control rings (hair2) */
  --hair:  #27333a;   /* calculator --line */
  --hair2: #3a4951;   /* derived: --line one step toward --mute */

  /* The solid fill of the main button, and the text on it */
  --solid:   #a3cc39;   /* calculator --accent */
  --onsolid: #14202a;   /* calculator --accent-ink */

  /* Signals: the base for dots, rings and washes; -text when it is words */
  --live: #a3cc39;      /* calculator --accent (its focus ring) */
  --wait: #ffa646;      /* derived amber */
  --bad:  #ff5b52;      /* derived red */
  --ok:   #7ef7fc;      /* calculator --quote (light value) */
  --live-text: #a3cc39;
  --wait-text: #ffa646;
  --bad-text:  #ff6b62;
  --ok-text:   #7ef7fc;
  --bad-soft:  rgba(255, 91, 82, 0.09);

  /* The ground behind the QR code, which must stay light to scan */
  --qr-ground: #ffffff;

  /* calculator --shadow (dark), as it is */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Light: when the browser asks for a light scheme. */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --g0: #eef2f4;   /* calculator --bg */
    --g1: #ffffff;   /* calculator --panel */
    --g2: #f6f8f9;   /* calculator --field */
    --g3: #ffffff;   /* calculator --panel */
    --ink:  #14202a;                 /* calculator --ink */
    --ink2: #3c4a54;                 /* derived: between --ink and --mute */
    --ink3: #5f6e78;                 /* calculator --mute #66757f, darkened for AA on --bg */
    --ink4: rgba(20, 32, 42, 0.24);  /* derived: --ink at Mark II's 24% */
    --hair:  #e1e7ea;   /* calculator --line */
    --hair2: #c6d0d5;   /* derived: --line one step toward --mute */
    --solid:   #a3cc39;   /* calculator --accent */
    --onsolid: #14202a;   /* calculator --accent-ink */
    --live: #5a7a10;      /* derived: --accent darkened to 3:1 or better on every ground */
    --wait: #c96a0a;
    --bad:  #d8352b;
    --ok:   #0b7f87;      /* derived: --quote darkened to 3:1 or better */
    --live-text: #4a6510;
    --wait-text: #8f4c08;
    --bad-text:  #b42a21;
    --ok-text:   #086870;
    --bad-soft:  rgba(216, 53, 43, 0.09);
    --qr-ground: #ffffff;
    /* calculator --shadow, as it is */
    --shadow: 0 1px 2px rgba(20, 32, 42, 0.06), 0 4px 14px rgba(20, 32, 42, 0.05);
  }
}

:root {
  /* Rings: a control's or card's edge is an inset line, not a border */
  --ring:       inset 0 0 0 1px var(--hair2);
  --ring-soft:  inset 0 0 0 1px var(--hair);
  --ring-hover: inset 0 0 0 1px var(--ink3);
  --ring-field: inset 0 0 0 1.5px var(--live);

  /* Faces: the calculator's one face, Lato, in all three slots */
  --font-display: "Lato", var(--db-font-heading);
  --font-text:    "Lato", var(--db-font-body);
  --font-mono:    "Lato", var(--db-font-mono);

  /* Type sizes: Mark II's, unchanged (the calculator's body is also 15px) */
  --fs-label:   13px;
  --fs-code:    14px;
  --fs-body:    15px;
  --fs-lead:    17px;
  --fs-title-s: 22px;
  --fs-title-l: 34px;
  --fs-wordmark: 19px;

  /* Spacing: Mark II's, unchanged */
  --space-4:  4px;
  --space-6:  6px;
  --space-8:  8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-22: 22px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;

  /* Radii: the calculator's 8 for fields and buttons, 12 for cards.
     --radius-pill keeps its name so app.css is untouched, but Blast has no
     pills: its buttons and selects are 8px rounded. */
  --radius-3:    3px;
  --radius-8:    8px;
  --radius-12:   12px;
  --radius-16:   12px;
  --radius-pill: 8px;

  /* Control heights: Mark II's, unchanged */
  --h-24: 24px;
  --h-28: 28px;
  --h-32: 32px;
  --h-34: 34px;
  --row:  42px;

  /* Layout: Mark II's, unchanged */
  --top:    56px;
  --rail-w: 56px;
  --page-w: 1180px;

  /* Motion: Mark II's, unchanged */
  --dur-140: 140ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --op-disabled: 0.45;
}