:root {
  --axus-teal: #63c5b6;
  --axus-teal-strong: #2db5a9;
  --axus-teal-dark: #125f5a;
  --axus-dark: #272f38;
  --axus-ink: rgba(20, 20, 20, 0.9);
  --axus-muted: rgba(20, 20, 20, 0.58);
  --axus-bg-soft: #f6f8f7;
  --axus-bg-panel: #ffffff;
  --axus-white: #ffffff;

  --axus-radius-xs: 8px;
  --axus-radius-sm: 10px;
  --axus-radius-md: 18px;
  --axus-radius-lg: 28px;
  --axus-radius-pill: 999px;

  --axus-space-1: 0.35rem;
  --axus-space-2: 0.55rem;
  --axus-space-3: 0.75rem;
  --axus-space-4: 1rem;
  --axus-space-5: 1.35rem;
  --axus-space-6: 2rem;

  --axus-shadow-soft: 0 16px 40px rgba(39, 47, 56, 0.14);
  --axus-shadow-card: 0 8px 24px rgba(39, 47, 56, 0.10);
  --axus-shadow-control: 0 12px 20px rgba(35, 52, 70, 0.14);

  --axus-border-soft: rgba(120, 150, 160, 0.18);
  --axus-border-glass: rgba(255, 255, 255, 0.38);

  --axus-modal-header-bg: var(--axus-teal);
  --axus-modal-text: var(--axus-dark);
  --axus-modal-backdrop: rgba(15, 23, 42, 0.28);
  --axus-modal-panel-bg: rgba(255, 255, 255, 0.16);
  --axus-modal-body-bg: var(--axus-white);

  --axus-focus-ring: 0.16rem solid rgba(93, 202, 192, 0.88);
}