/* Glass — generated from styles/glass/style.json by `npm run styles`. Do not edit. */

/* Frosted translucent panels over a violet-to-cyan glow, rounded corners, the system font. The VoiceScribe look from the STT tools. */

:root {
  --eg-style: glass;
  --eg-font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  --eg-font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  --eg-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --eg-radius: 12px;
  --eg-radius-lg: 20px;
  color-scheme: dark;
  --eg-bg: #0a0e1a;
  --eg-page-bg: radial-gradient(1200px 800px at 10% -10%, rgba(124, 92, 255, 0.25), transparent 60%), radial-gradient(900px 600px at 100% 10%, rgba(34, 211, 238, 0.18), transparent 60%), linear-gradient(180deg, #0a0e1a, #131a2c) fixed;
  --eg-surface: rgba(255, 255, 255, 0.04);
  --eg-surface-2: rgba(255, 255, 255, 0.06);
  --eg-sunken: rgba(0, 0, 0, 0.25);
  --eg-hover: rgba(255, 255, 255, 0.1);
  --eg-active: rgba(255, 255, 255, 0.14);
  --eg-border: rgba(255, 255, 255, 0.08);
  --eg-border-strong: rgba(255, 255, 255, 0.2);
  --eg-text: #e8ecf7;
  --eg-text-strong: #ffffff;
  --eg-text-muted: #8b93ad;
  --eg-accent: #8b6dff;
  --eg-accent-2: #22d3ee;
  --eg-accent-fill: #6d4dff;
  --eg-on-accent: #ffffff;
  --eg-success: #22c55e;
  --eg-warn: #f5b942;
  --eg-danger: #ff4d6d;
  --eg-danger-fill: #d61f45;
  --eg-on-danger: #ffffff;
  --eg-info: #22d3ee;
  --eg-overlay: rgba(5, 8, 16, 0.7);
  --eg-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  --eg-blur: 10px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --eg-bg: #f3f5fb;
  --eg-page-bg: radial-gradient(1200px 800px at 10% -10%, rgba(124, 92, 255, 0.14), transparent 60%), radial-gradient(900px 600px at 100% 10%, rgba(34, 211, 238, 0.12), transparent 60%), linear-gradient(180deg, #f3f5fb, #e9edf7) fixed;
  --eg-surface: rgba(255, 255, 255, 0.7);
  --eg-surface-2: rgba(255, 255, 255, 0.85);
  --eg-sunken: rgba(20, 26, 46, 0.05);
  --eg-hover: rgba(20, 26, 46, 0.08);
  --eg-active: rgba(20, 26, 46, 0.12);
  --eg-border: rgba(20, 26, 46, 0.12);
  --eg-border-strong: rgba(20, 26, 46, 0.28);
  --eg-text: #141a2e;
  --eg-text-strong: #05070f;
  --eg-text-muted: #4d5570;
  --eg-accent: #5b3df5;
  --eg-accent-2: #0e7490;
  --eg-accent-fill: #5b3df5;
  --eg-on-accent: #ffffff;
  --eg-success: #15803d;
  --eg-warn: #975700;
  --eg-danger: #be123c;
  --eg-danger-fill: #be123c;
  --eg-on-danger: #ffffff;
  --eg-info: #0e7490;
  --eg-overlay: rgba(20, 26, 46, 0.4);
  --eg-shadow: 0 20px 60px rgba(20, 26, 46, 0.15);
  --eg-blur: 10px;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    color-scheme: light;
    --eg-bg: #f3f5fb;
    --eg-page-bg: radial-gradient(1200px 800px at 10% -10%, rgba(124, 92, 255, 0.14), transparent 60%), radial-gradient(900px 600px at 100% 10%, rgba(34, 211, 238, 0.12), transparent 60%), linear-gradient(180deg, #f3f5fb, #e9edf7) fixed;
    --eg-surface: rgba(255, 255, 255, 0.7);
    --eg-surface-2: rgba(255, 255, 255, 0.85);
    --eg-sunken: rgba(20, 26, 46, 0.05);
    --eg-hover: rgba(20, 26, 46, 0.08);
    --eg-active: rgba(20, 26, 46, 0.12);
    --eg-border: rgba(20, 26, 46, 0.12);
    --eg-border-strong: rgba(20, 26, 46, 0.28);
    --eg-text: #141a2e;
    --eg-text-strong: #05070f;
    --eg-text-muted: #4d5570;
    --eg-accent: #5b3df5;
    --eg-accent-2: #0e7490;
    --eg-accent-fill: #5b3df5;
    --eg-on-accent: #ffffff;
    --eg-success: #15803d;
    --eg-warn: #975700;
    --eg-danger: #be123c;
    --eg-danger-fill: #be123c;
    --eg-on-danger: #ffffff;
    --eg-info: #0e7490;
    --eg-overlay: rgba(20, 26, 46, 0.4);
    --eg-shadow: 0 20px 60px rgba(20, 26, 46, 0.15);
    --eg-blur: 10px;
  }
}