:root {
  --color-primary: #b41414;
  --color-primary-dark: #8d0f0f;
  --color-surface: rgba(255, 255, 255, 0.92);
  --color-surface-strong: #ffffff;
  --color-text: #1f1a1a;
  --color-text-soft: #6e5454;
  --color-border: rgba(180, 20, 20, 0.14);
  --color-shadow: rgba(111, 22, 22, 0.18);
  --color-card-border: rgba(255, 255, 255, 0.7);
  --color-field-bg: #fffdfd;
  --color-brand-panel-overlay: linear-gradient(180deg, rgba(180, 20, 20, 0.10), rgba(255, 255, 255, 0.24));
  --color-brand-panel-glow: rgba(255, 255, 255, 0.42);
  --color-auth-panel-bg: rgba(255, 255, 255, 0.7);
  --color-form-bg: rgba(255, 255, 255, 0.94);
  --color-form-border: rgba(180, 20, 20, 0.12);
  --color-error-bg: rgba(180, 20, 20, 0.07);
  --color-error-border: rgba(180, 20, 20, 0.18);
  --color-verification-button-bg: linear-gradient(180deg, #ffffff, #f7e3e3);
  --color-verification-panel-bg: rgba(255, 255, 255, 0.94);
  --color-verification-panel-border: rgba(180, 20, 20, 0.14);
  --page-background: linear-gradient(180deg, #cc1f1f 0%, #f8d7d7 45%, #ffffff 100%);
  --radius-xl: 24px;
  --radius-lg: 16px;
  --radius-md: 12px;
}

body[data-theme="dark"] {
  --color-primary: #ff6b57;
  --color-primary-dark: #ffb3a8;
  --color-surface: rgba(20, 25, 34, 0.92);
  --color-surface-strong: #1d2430;
  --color-text: #f6f1f1;
  --color-text-soft: #c5b8b8;
  --color-border: rgba(255, 130, 110, 0.22);
  --color-shadow: rgba(0, 0, 0, 0.42);
  --color-card-border: rgba(255, 255, 255, 0.08);
  --color-field-bg: #151a23;
  --color-brand-panel-overlay: linear-gradient(180deg, rgba(255, 107, 87, 0.18), rgba(27, 35, 48, 0.42));
  --color-brand-panel-glow: rgba(255, 184, 173, 0.12);
  --color-auth-panel-bg: rgba(17, 22, 30, 0.76);
  --color-form-bg: rgba(16, 20, 28, 0.96);
  --color-form-border: rgba(255, 130, 110, 0.18);
  --color-error-bg: rgba(255, 107, 87, 0.14);
  --color-error-border: rgba(255, 130, 110, 0.24);
  --color-verification-button-bg: linear-gradient(180deg, #222a38, #151b25);
  --color-verification-panel-bg: rgba(16, 20, 28, 0.96);
  --color-verification-panel-border: rgba(255, 130, 110, 0.16);
  --page-background: linear-gradient(180deg, #230606 0%, #111827 50%, #090d14 100%);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  color: var(--color-text);
  background: var(--page-background);
  transition: background 220ms ease, color 220ms ease;
}

button,
input {
  font: inherit;
}