/* Design tokens: change the look here, nowhere else. */
:root {
  --color-bg: #fbf7f0;
  --color-surface: #ffffff;
  --color-ink: #1d1b19;
  --color-muted: #6f6a63;
  --color-line: #e7e0d5;
  --color-accent: #ff6b3d;
  --color-accent-ink: #ffffff;
  --color-accent-soft: #ffe3d8;
  --color-ok: #2f9e6b;
  --color-danger: #d23b3b;
  --color-bar-1: #ff6b3d;
  --color-bar-2: #3d7bff;
  --color-bar-3: #2f9e6b;
  --color-bar-4: #f2b035;
  --color-bar-5: #a35bd9;
  --color-bar-6: #2fb3c4;
  --color-overlay: rgba(29, 27, 25, 0.82);

  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-weight-regular: 500;
  --font-weight-bold: 800;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 28px;
  --shadow-card: 0 2px 0 rgba(29, 27, 25, 0.08), 0 8px 24px rgba(29, 27, 25, 0.06);

  /* Phone */
  --phone-text: 18px;
  --phone-title: 24px;
  --phone-tap: 56px;
  --phone-avatar: 64px;

  /* Projector: sized off the viewport so it reads from the back row */
  --screen-title: clamp(28px, 3.6vw, 72px);
  --screen-text: clamp(18px, 1.8vw, 36px);
  --screen-small: clamp(14px, 1.1vw, 22px);
  --screen-huge: clamp(64px, 9vw, 180px);
  --screen-avatar: clamp(56px, 5.2vw, 104px);
  --screen-qr-corner: clamp(96px, 8vw, 150px);
  --screen-qr-big: min(42vh, 30vw);

  --motion-fast: 160ms;
  --motion-slow: 600ms;
}