/*
 * Web showroom tokens. The only file that holds raw values; components read the semantic
 * names, so a presenter density or a contrast preference is a token swap and not a restyle.
 *
 * The face belongs to this project, not to the Hilton page whose layout it shares: the
 * ground, ink and one blue accent are MB Remote's (ShowroomRemote/Theme.swift: the cove
 * light's blue), what is said is set in a light text serif, what is pressed in a plain
 * sans, and every count and measurement in mono.
 */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  /* Self-hosted: a meeting room without Wi-Fi still gets the right type. */
  src: url('./fonts/instrument-sans-latin-wdth-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('./fonts/newsreader-latin-opsz-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('./fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
}

:root {
  --font-ui: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type: ratio 1.25 with a 12px floor. --density is 1.25 while presenting. */
  --density: 1;
  --t-meta: calc(0.75rem * var(--density));
  --t-ui: calc(0.875rem * var(--density));
  --t-body: calc(1rem * var(--density));
  --t-lede: calc(1.25rem * var(--density));
  --t-h3: calc(1.5625rem * var(--density));
  --t-h2: calc(clamp(1.75rem, 1.2rem + 1.1vw, 2.25rem) * var(--density));
  --t-h1: clamp(3rem, 1.4rem + 4.6vw, 5.75rem);

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --gutter: clamp(16px, 2.2vw, 32px);
  --panel: calc(448px * var(--density));
  --rail-w: 268px;
  --sheet-w: 360px;

  /* Stage ground: the renderer clears to the same value (stage.js), so the studio, a film's
     letterbox and the interface are one surface. */
  --stage: #0b0c0e;
  --stage-rgb: 11 12 14;
  --ink: #edebe6;
  --ink-2: #cbc9c4;
  --muted: #9d9c98;
  --accent: #35b2e6;
  --accent-hover: #63c6f0;
  --accent-ink: #08121a;
  --alert: #f5a842;
  --rule: rgb(237 235 230 / 0.16);
  --rule-strong: rgb(237 235 230 / 0.34);
  --hover: rgb(237 235 230 / 0.08);
  /* 0.82 is the lowest plate that keeps muted text at 4.5:1 over the brightest thing
     behind it here, daylight's pale wall. */
  --plate-alpha: 0.82;
  --plate: rgb(var(--stage-rgb) / var(--plate-alpha));
  --plate-solid: #101114;

  --radius: 3px;

  /* Motion. Exits are always faster than entrances. */
  --dur-press: 80ms;
  --dur-exit: 140ms;
  --dur-enter: 240ms;
  --dur-sheet: 320ms;
  --dur-veil: 600ms;
  --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 0.9);
  --ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
  --rise: 8px;

  --z-hud: 10;
  --z-card: 20;
  --z-veil: 30;
  --z-blank: 40;
}

/* Presenting: type steps up for a room-distance audience. */
[data-presenting='true'] {
  --density: 1.25;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --rise: 0px;
  }
}
@media (prefers-contrast: more) {
  :root {
    --plate-alpha: 0.94;
    --muted: var(--ink-2);
    --rule: rgb(237 235 230 / 0.4);
  }
}