/* Theme tokens for the dictation demo.
 *
 * demo.css reads every colour, font, radius and shadow from these sixteen
 * variables and hard-codes none of them, so this file is the whole theming
 * surface: change it and the widget follows, with no need to touch demo.css.
 *
 * Load this BEFORE demo.css. If the site already defines a variable of the same
 * name in its own :root, delete that line here and the site's value wins.
 *
 * The values below are the WhisperTyping defaults, included so the widget looks
 * finished out of the box rather than unstyled. */
:root {
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

  --color-bg: #ffffff;
  --color-text: #1a1a2e;
  --color-text-dark: #001122;
  --color-text-light: #555566;
  --color-text-muted: #888899;
  --color-border: #e8e6ee;
  --color-border-light: #f0eef4;
  --color-orange: #ff7000;

  /* The push-to-talk button, the recording state, and the heading accent. */
  --gradient-button: radial-gradient(144% 603% at 112.1% 137.5%, #ff8065 0%, #f9a020 100%);
  --gradient-button-pink: radial-gradient(144% 603% at 112.1% 137.5%, rgb(250, 62, 125) 0%, rgb(133, 46, 209) 100%);
  --gradient-hero: linear-gradient(90deg, #ff7000 0%, #e5498a 70%, #e750e6 100%);

  --radius-lg: 12px;
  --radius-xl: 24px;
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);
}