:root {
  /* Colors */
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-muted: #666666;
  --color-video-bg: #0a0a1a;
  --color-badge-bg: rgba(99, 102, 241, 0.9); /* #6366f1 @ 0.9 */

  --color-mic-bg: #f8f9fa;
  --color-muted-light: #e8e8e8;
  --color-mic-from: #22c55e;
  --color-mic-to: #86efac;

  --color-control-border: #e5e5e5;
  --color-control-hover-bg: #fee2e2;
  --color-control-disabled-bg: #fecaca;
  --color-control-disabled-text: #dc2626;

  --color-kbd-bg: #374151;
  --color-info: #3b82f6;

  --color-input-border: #d1d5db;
  --color-input-placeholder: #9ca3af;

  --color-submit: #2563eb;
  --color-submit-hover: #1d4ed8;
  --color-submit-active: #1e40af;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-h1: 1.75rem; /* 28px */
  --fs-body: 0.875rem; /* 14px */
  --fs-small: 0.6875rem; /* 11px */
  --fs-btn: 0.8125rem; /* 13px */
  --fs-submit: 0.9375rem; /* 15px */

  /* Radii */
  --radius-lg: 12px;
  --radius-md: 8px;
  --radius-pill: 20px;
  --radius-meter: 16px;

  /* Layout */
  --container-max-width: 628px;
  --gap-default: 16px;

  /* Shadows */
  --shadow-controls: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);

  /* Misc */
  --kbd-padding: 2px 6px;
}

/* Small helper utilities used by avanza-ui components when not using Tailwind */
.avz-kbd {
  background-color: var(--color-kbd-bg);
  padding: var(--kbd-padding);
  border-radius: 3px;
  font-family: monospace;
  font-size: var(--fs-small);
  color: #fff;
}

.avz-badge {
  background: var(--color-badge-bg);
  color: #fff;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
}

.avz-preview {
  background: var(--color-video-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.avz-control-shadow {
  box-shadow: var(--shadow-controls);
}