/*
  HOAi Voice kiosk: design tokens.

  The layout is drawn at 1640 x 2360 (iPad portrait at 2x, the canvas
  artboards). --u is one design pixel at the current screen size, so every
  size below is "design px x --u" and the whole layout scales as one piece to
  any iPad, and letterboxes on anything wider.
*/

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: block;
}

:root {
  --u: min(calc(100vw / 1640), calc(100vh / 2360));

  /* Color */
  --c-ground: #0c1e28;
  --c-surface: #1a2c36;
  --c-surface-active: #223a47;
  --c-video: #173c4f;
  --c-tile: #eef2f7;
  --c-ink: #ffffff;
  --c-ink-muted: rgba(255, 255, 255, 0.7);
  --c-ink-faint: rgba(255, 255, 255, 0.58);
  --c-rule: rgba(255, 255, 255, 0.18);
  --c-rule-strong: rgba(255, 255, 255, 0.36);
  --c-accent: #7edece;
  --c-accent-hover: #9be6d9;
  --c-accent-ink: #0c1e28;
  --c-accent-tint: rgba(126, 222, 206, 0.14);
  --c-accent-tint-strong: rgba(126, 222, 206, 0.22);
  --c-glow-teal: rgba(18, 138, 136, 0.32);
  --c-glow-blue: rgba(53, 114, 159, 0.5);
  --c-focus: #ffffff;

  /* Type */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: calc(26 * var(--u));
  --fs-s: calc(32 * var(--u));
  --fs-m: calc(36 * var(--u));
  --fs-l: calc(40 * var(--u));
  --fs-xl: calc(44 * var(--u));
  --fs-2xl: calc(52 * var(--u));
  --fs-3xl: calc(60 * var(--u));
  --fs-4xl: calc(76 * var(--u));
  --fs-5xl: calc(88 * var(--u));
  --fs-6xl: calc(104 * var(--u));
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.08;
  --lh-snug: 1.2;
  --lh-body: 1.4;
  --ls-display: -0.025em;
  --ls-title: -0.02em;
  --ls-eyebrow: 0.12em;

  /* Space (4-based, in design px) */
  --s-1: calc(4 * var(--u));
  --s-2: calc(8 * var(--u));
  --s-3: calc(12 * var(--u));
  --s-4: calc(16 * var(--u));
  --s-5: calc(20 * var(--u));
  --s-6: calc(24 * var(--u));
  --s-7: calc(28 * var(--u));
  --s-8: calc(32 * var(--u));
  --s-9: calc(36 * var(--u));
  --s-10: calc(40 * var(--u));
  --s-12: calc(48 * var(--u));
  --s-14: calc(56 * var(--u));
  --s-16: calc(64 * var(--u));
  --s-18: calc(72 * var(--u));
  --s-20: calc(80 * var(--u));
  --s-22: calc(88 * var(--u));
  --s-30: calc(120 * var(--u));

  /* Radius */
  --r-s: calc(20 * var(--u));
  --r-m: calc(28 * var(--u));
  --r-l: calc(36 * var(--u));
  --r-xl: calc(52 * var(--u));
  --r-pill: 999px;

  /* Borders */
  --bw: calc(2 * var(--u));
  --bw-focus: calc(6 * var(--u));

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.2, 1);
  --dur-fast: 160ms;
  --dur: 420ms;
  --dur-slow: 700ms;
}

@supports (height: 100dvh) {
  :root { --u: min(calc(100vw / 1640), calc(100dvh / 2360)); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}