/* Voice design tokens: "Two voices" glass (chosen 2026-11-02).
   Colour always means who is speaking: periwinkle is the agent, peach is the customer.
   Everything else is graphite glass and white text. Keep in sync with home-film/film.config.json. */
:root {
  color-scheme: dark;

  /* room */
  --room-dark: #23232c;
  --room-mid: #4c4c5c;
  --room-light: #7a7a88;

  /* ink */
  --ink: #ffffff;
  --ink-soft: rgba(232, 232, 240, 0.7);
  --ink-faint: rgba(232, 232, 240, 0.48);

  /* the only hues: who is speaking */
  --agent: #93a5ff;
  --customer: #ffb48c;
  /* status, kept clear of the speaker colours */
  --danger: #ff7a90;
  --danger-ink: #ffd3db;

  /* glass */
  --glass-smoked: rgba(16, 16, 26, 0.36);
  --glass-smoked-strong: rgba(16, 16, 26, 0.52);
  --glass-frosted: rgba(255, 255, 255, 0.11);
  --glass-frosted-hover: rgba(255, 255, 255, 0.17);
  --glass-selected: rgba(255, 255, 255, 0.09);
  --glass-blur: 46px;
  --glass-saturate: 1.15;
  --glass-rim: rgba(236, 236, 248, 0.78);
  --glass-rim-mid: rgba(236, 236, 248, 0.22);
  --glass-rim-low: rgba(236, 236, 248, 0.28);
  --glass-thickness: rgba(0, 0, 0, 0.42);
  --glass-shadow: rgba(0, 0, 0, 0.45);
  --track: rgba(255, 255, 255, 0.12);

  /* icons: soft grey gradient */
  --icon-top: #f1f1f6;
  --icon-bottom: #a9aab5;

  /* shape: one card radius, pills and circles for controls */
  --radius-card: 36px;
  --radius-panel: 28px;
  --radius-pill: 999px;

  /* type: Jost, sentence case, nothing under 13px */
  --font: "Jost", system-ui, sans-serif;
  --text-xs: 13px;
  --text-sm: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 28px;
  --text-2xl: 40px;
  --text-hero: clamp(40px, 6vw, 76px);
  --weight-regular: 400;
  --weight-medium: 500;

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

  /* motion: answers people, never decorates */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 520ms;

  /* focus: white, so it never reads as a speaker colour */
  --focus: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 6px rgba(255, 255, 255, 0.18);
}