/*
 * Wedding twin 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. Carried over from the approved Hilton
 * CONEXION client app; the one change is the accent.
 *
 * The look comes from the venue: Archivo at its widest for display, the
 * gilt of The Breakers' coffered ceilings as the one accent (it means
 * "selected" or "next" and nothing else), and mono for times, counts and
 * seat labels.
 */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  /* Self-hosted: a sales office without Wi-Fi still gets the right type. */
  src: url('./fonts/archivo-latin-wdth-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: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --display-stretch: 118%;

  /* 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.5rem, 1.1rem + .9vw, 1.875rem) * var(--density));
  --t-h1: clamp(2.75rem, 1.2rem + 5.2vw, 6rem);

  --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: 384px;

  /* Stage ground: the renderer clears to the same value (venue.js), so the
     room, the night sky's edge and the interface are one surface. */
  --stage: #08090b;
  --stage-rgb: 8 9 11;
  --ink: #f1eee7;
  --ink-2: #cfccc5;
  --muted: #a3a19b;
  --accent: #e2c079;
  --accent-hover: #efd196;
  --accent-ink: #171207;
  --alert: #ff8f70;
  --rule: rgb(241 238 231 / 0.16);
  --rule-strong: rgb(241 238 231 / 0.34);
  --hover: rgb(241 238 231 / 0.08);
  /* 0.8 is the lowest plate that keeps muted text at 4.5:1 over the brightest
     thing behind it here, a sunlit sky over the ocean. */
  --plate-alpha: 0.8;
  --plate: rgb(var(--stage-rgb) / var(--plate-alpha));
  --plate-solid: #0d0f12;

  /* The printed run sheet: ink on paper. */
  --paper: #ffffff;
  --paper-ink: #16140f;
  --paper-muted: #5b5850;
  --paper-rule: #c9c5bb;

  --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(241 238 231 / 0.4);
  }
}