:root {
  --a2ui-color-primary: #17e;
  --a2ui-icon-font-family: "Material Icons Round";
}

.a2ui-light {
  --a2ui-color-background: #eee;
  --a2ui-color-on-background: #333;
  --a2ui-color-surface: #f5f5f5;
  --a2ui-color-on-surface: #333;
  --a2ui-color-primary-hover: #0057d9;
  --a2ui-color-on-primary: #fff;
  --a2ui-color-secondary: #ddd;
  --a2ui-color-secondary-hover: #2a2a2a;
  --a2ui-color-on-secondary: #333;
  --a2ui-color-border: #ccc;
  --a2ui-color-input: #fff;
  --a2ui-color-on-input: #333;
  --a2ui-color-input-placeholder: #8a8a8a;
  --a2ui-color-input-error: #d92d20;
  --a2ui-color-input-error-bg: rgba(217, 45, 32, 0.08);
  --a2ui-color-background-ambient: #ddd;
  --a2ui-color-surface-muted: #e8e8e8;
  --a2ui-color-surface-strong: #fff;
  --a2ui-color-border-strong: #e5e5e5;
  --a2ui-color-text-muted: #5d5d5d;
  --a2ui-color-text-subtle: #9e9e9e;
  --a2ui-color-overlay: rgba(0, 0, 0, 0.05);
  --a2ui-icon-color-primary: var(--a2ui-color-primary);
  --a2ui-icon-color-muted: var(--a2ui-color-text-muted);
}

.a2ui-dark {
  --a2ui-color-background: #111;
  --a2ui-color-on-background: #eee;
  --a2ui-color-surface: #1b1b1b;
  --a2ui-color-on-surface: #eee;
  --a2ui-color-primary-hover: #4d8cff;
  --a2ui-color-secondary: #333;
  --a2ui-color-secondary-hover: #eaeaea;
  --a2ui-color-on-secondary: #eee;
  --a2ui-color-border: #444;
  --a2ui-color-input: #2a2a2a;
  --a2ui-color-on-input: #eee;
  --a2ui-color-input-placeholder: #7d7d7d;
  --a2ui-color-input-error: #ff6b6b;
  --a2ui-color-input-error-bg: rgba(255, 107, 107, 0.12);
  --a2ui-color-background-ambient: #000;
  --a2ui-color-surface-muted: #222;
  --a2ui-color-surface-strong: #232323;
  --a2ui-color-border-strong: #333;
  --a2ui-color-text-muted: #b3b3b3;
  --a2ui-color-text-subtle: #6e6e6e;
  --a2ui-color-overlay: rgba(248, 248, 248, 0.08);
  --a2ui-icon-color-primary: #4d8cff;
  --a2ui-icon-color-muted: var(--a2ui-color-text-subtle);
}