/* The theme tokens (`--hub-*`) and the font: Montserrat, the Schedulo brand face (SIL OFL 1.1,
   fonts/Montserrat-OFL.txt; Latin subset from Schedulo TXC), drawn at 93% as the brand's desktop apps
   do so sizes chosen for a narrower face still fit. "Schedulo Logo" is the capitals-only Montserrat
   Black for the wordmark and product label. The dark look is the default; `<html data-theme="light">`
   switches to the light one. */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: block; size-adjust: 93%; src: url("../fonts/Montserrat-400.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: block; size-adjust: 93%; src: url("../fonts/Montserrat-500.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: block; size-adjust: 93%; src: url("../fonts/Montserrat-600.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: block; size-adjust: 93%; src: url("../fonts/Montserrat-700.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: block; size-adjust: 93%; src: url("../fonts/Montserrat-700.woff2") format("woff2"); }
@font-face { font-family: "Schedulo Logo"; font-style: normal; font-weight: 900; font-display: block; src: url("../fonts/Montserrat-900-logo.woff2") format("woff2"); }

/* the dark look */
:root {
  /* the Bus accent (#00a6e8), a shade deeper where white words go on it (4.9:1) */
  --hub-accent: #0077b6;
  --hub-accent-rgb: 0, 119, 182;
  --hub-accent-hover: #0a8ad0;
  --hub-accent-deep: #00639a;
  --hub-accent-chosen: #0077b6;
  --hub-accent-text: #33b8ed;
  --hub-accent-soft-rgb: 51, 184, 237;
  --hub-on-accent: #ffffff;
  --hub-ground: #071433;
  --hub-panel: #141a26;
  --hub-field: #1b2231;
  --hub-hover: #212836;
  --hub-selected: #262e3e;
  --hub-text: #e8ebf2;
  --hub-text-soft: #c4cad6;
  --hub-text-dim: #959db0;
  --hub-text-faint: #60687a;
  /* (the theme's see-through whites - an edge .08, a hairline .09, a switch's track .16, a
     slider's rail .12 - blended in linear light: over the panel about as strong as these
     blended plainly, `--aw-*` of company.css) */
  --hub-edge: rgba(255, 255, 255, 0.268);
  --hub-hairline: rgba(255, 255, 255, 0.287);
  --hub-lift: rgba(255, 255, 255, 0.06);
  --hub-track: rgba(255, 255, 255, 0.407);
  --hub-rail: rgba(255, 255, 255, 0.34);
  --hub-knob: #f0f0f0;
  --hub-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  --hub-scrim: rgba(4, 7, 15, 0.62);
  /* the glass of the bar and the start's card: smoked, under white words, rims in the accent */
  --hub-glass: rgba(6, 12, 30, 0.55);
  --hub-glass-card: rgba(6, 12, 30, 0.55);
  --hub-glass-on: rgba(72, 72, 80, 0.9);
  --hub-glass-on-hover: rgba(86, 86, 96, 0.92);
  --hub-glass-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  --hub-glass-edge: rgba(255, 255, 255, 0.07);
  --hub-glass-rim: rgba(var(--hub-accent-rgb), 0.55);
  --hub-glass-glow: rgba(var(--hub-accent-rgb), 0.22);
  --hub-glass-ink: #e8ebf2;
  --hub-glass-ink-soft: #c4cad6;
  --hub-glass-ink-dim: #959db0;
  --hub-glass-ink-faint: #60687a;
  --hub-logo-ink: #eef1f5;
  /* meanings: late, on time, early, a warning; the line's plate */
  --hub-danger: #d93a30;
  --hub-ok: #34b26e;
  --hub-warn: #e8aa46;
  --hub-early: #7aa8ff;
  --hub-line: #ffd23f;
  --hub-on-line: #1a1400;
  /* the measures: a control, a sheet, the main action; a row */
  --hub-r: 10px;
  --hub-r-sheet: 14px;
  --hub-r-action: 12px;
  --hub-row: 36px;
  --hub-edge-in: 22px;
  --hub-bar-h: 40px;
  --hub-sheet-top: 85px;
  --hub-action-h: 62px;
  --hub-action-bottom: 31px;
  color-scheme: dark;
}

/* the light look */
:root[data-theme="light"] {
  --hub-ground: #eef1f8;
  --hub-panel: #ffffff;
  --hub-field: #f3f5fa;
  --hub-hover: #e9edf6;
  --hub-selected: #e5e9f7;
  --hub-text: #071433;
  --hub-text-soft: #2a3550;
  --hub-text-dim: #545e78;
  --hub-text-faint: #7d869c;
  /* (the dark look's see-through whites as see-through ink, in linear light as the bus
     company's are, company.css) */
  --hub-edge: rgba(22, 20, 26, 0.126);
  --hub-hairline: rgba(22, 20, 26, 0.134);
  --hub-lift: rgba(22, 20, 26, 0.05);
  --hub-track: rgba(22, 20, 26, 0.185);
  --hub-rail: rgba(22, 20, 26, 0.157);
  --hub-shadow: 0 6px 24px rgba(7, 20, 51, 0.14);
  --hub-scrim: rgba(7, 20, 51, 0.4);
  --hub-glass: rgba(255, 255, 255, 0.4);
  --hub-glass-card: rgba(255, 255, 255, 0.6);
  --hub-glass-on: rgba(255, 255, 255, 0.38);
  --hub-glass-on-hover: rgba(255, 255, 255, 0.75);
  --hub-glass-shadow: 0 2px 9px rgba(7, 20, 51, 0.08);
  --hub-glass-edge: rgba(255, 255, 255, 0.85);
  --hub-glass-rim: rgba(255, 255, 255, 0.95);
  --hub-glass-glow: rgba(var(--hub-accent-rgb), 0.12);
  --hub-glass-ink: #071433;
  --hub-glass-ink-soft: #2a3550;
  --hub-glass-ink-dim: #545e78;
  --hub-glass-ink-faint: #8d95a8;
  --hub-logo-ink: #071433;
  --hub-danger: #c4352c;
  --hub-ok: #1a8a4f;
  --hub-warn: #9c6a12;
  --hub-early: #0077b6;
  --hub-accent-text: #0077b6;
  color-scheme: light;
}