:root {
  color-scheme: light dark;
  --io-brand-coral: #ff4b4b;
  --io-brand-coral-deep: #eb3f45;
  --io-brand-coral-soft: #ff6861;
  --io-brand-gradient: linear-gradient(135deg, var(--io-brand-coral-soft), var(--io-brand-coral-deep));
  --io-primary: #c8323c;
  --io-primary-hover: #ad2732;
  --io-success: #4bbf73;
  --io-danger: #d9534f;
  --io-font-sans: Poppins, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --io-radius-sm: 0.35rem;
  --io-radius-md: 0.7rem;
  --io-radius-lg: 1rem;
  --io-shadow-card: 0 0.75rem 2.5rem rgb(41 48 66 / 10%);
  --io-transition: 180ms ease;
}

:root,
:root[data-io-effective-theme="light"] {
  --io-bg: #f7f9fc;
  --io-surface: #ffffff;
  --io-surface-muted: #f4f7f9;
  --io-text: #495057;
  --io-text-strong: #293042;
  --io-text-muted: #6c757d;
  --io-border: #e2e8ee;
  --io-focus: #ff5f61;
  --io-link: #c8323c;
}

:root[data-io-effective-theme="dark"] {
  --io-bg: #202634;
  --io-surface: #293042;
  --io-surface-muted: #333b4f;
  --io-text: #c2c6ce;
  --io-text-strong: #f4f7f9;
  --io-text-muted: #a9afb9;
  --io-border: #424b61;
  --io-focus: #ff7775;
  --io-link: #ff8a86;
  --io-shadow-card: 0 1rem 3rem rgb(0 0 0 / 24%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-io-effective-theme]) {
    --io-bg: #202634;
    --io-surface: #293042;
    --io-surface-muted: #333b4f;
    --io-text: #c2c6ce;
    --io-text-strong: #f4f7f9;
    --io-text-muted: #a9afb9;
    --io-border: #424b61;
    --io-focus: #ff7775;
    --io-link: #ff8a86;
    --io-shadow-card: 0 1rem 3rem rgb(0 0 0 / 24%);
  }
}