/*
 * The default theme.
 *
 * A theme defines custom properties and nothing else. Every theme in this
 * folder defines the same set — `src/styles/app.css` uses them and never names
 * a colour of its own, so a conference gets its own look by adding a file here
 * rather than by forking the frontend.
 *
 * The type is a system stack. Nothing is downloaded to draw text; that is also
 * all `font-src 'self'` would allow.
 */

:root {
  /* Colour */
  /* Which way the browser draws what it draws itself: the calendar and clock
     the date and time fields open, and the list a select drops down. Nothing
     in `app.css` can reach inside those, so the theme has to say. */
  --color-scheme: dark;
  --color-background: #101317;
  --color-surface: #191d23;
  --color-surface-quiet: #14181d;
  --color-text: #d7dde5;
  --color-heading: #f4f7fa;
  --color-muted: #8b96a5;
  --color-accent: #4fb0ff;
  --color-accent-text: #06121d;
  --color-border: #262c34;
  --color-warning: #ffb454;
  --color-break: #6c7a8a;
  --color-qr-background: #ffffff;
  /* The code is drawn dark on that white, and so is the address printed under
     it — both are on the code's own background and not on the theme's. */
  --color-qr-text: #12161c;

  /* Type */
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Size. In viewport units, because these are screens of every size from a
     tablet by a door to a projector at the end of a hall, and none of them is
     read from a desk chair. */
  --font-size-base: clamp(16px, 1.4vmin, 28px);
  --font-size-small: clamp(12px, 1.2vmin, 22px);
  --font-size-meta: clamp(14px, 1.7vmin, 32px);
  --font-size-lead: clamp(16px, 2vmin, 38px);
  --font-size-title: clamp(20px, 3vmin, 56px);
  --font-size-title-large: clamp(28px, 5vmin, 96px);
  --font-size-title-small: clamp(18px, 2.4vmin, 44px);
  --font-size-room: clamp(22px, 3.4vmin, 64px);
  --font-size-huge: clamp(32px, 6.5vmin, 128px);

  /* Space */
  --gap: clamp(12px, 2.2vmin, 44px);
  --radius: 6px;
  --border-width: 1px;
  --accent-width: 4px;
  --qr-size: clamp(140px, 26vmin, 440px);

  /* The hidden menu: how far down the top edge catches a pointer, and the
     shadow it casts over the screen when it is down. */
  --menu-reach: 1.75rem;
  --menu-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 45%);
}