:root {
  color-scheme: light;

  --mp-purple-700: #5136c7;
  --mp-purple-600: #6847e8;
  --mp-purple-100: #ede8ff;
  --mp-purple-50: #f7f5ff;
  --mp-lemon-400: #e5f23b;
  --mp-bg: #f7f6fa;
  --mp-surface: #ffffff;
  --mp-text: #201b2d;
  --mp-text-secondary: #706a7b;
  --mp-border: #e8e3ef;
  --mp-success: #138a60;
  --mp-success-bg: #e8f7f0;
  --mp-warning: #9a6300;
  --mp-warning-bg: #fff5d9;
  --mp-danger: #c53c64;
  --mp-danger-bg: #fff0f4;
  --mp-info: #2f6fd6;
  --mp-info-bg: #edf4ff;

  --mp-space-1: 4px;
  --mp-space-2: 8px;
  --mp-space-3: 12px;
  --mp-space-4: 16px;
  --mp-space-5: 20px;
  --mp-space-6: 24px;
  --mp-space-8: 32px;

  --mp-radius-sm: 10px;
  --mp-radius-control: 12px;
  --mp-radius-card: 16px;
  --mp-radius-hero: 22px;
  --mp-shadow-card: 0 4px 14px rgba(56, 37, 112, 0.08);
  --mp-shadow-hero: 0 12px 30px rgba(81, 54, 199, 0.16);
  --mp-shadow-float: 0 8px 20px rgba(81, 54, 199, 0.2);
  --mp-shadow-modal: 0 20px 48px rgba(32, 22, 70, 0.24);

  --mp-header-height: 118px;
  --mp-nav-height: 66px;
  --mp-content-max: 720px;

  /* Legacy variable bridge. Existing calculation and rendering code keeps working. */
  --bg: var(--mp-bg);
  --card: var(--mp-surface);
  --card2: var(--mp-purple-50);
  --line: var(--mp-border);
  --txt: var(--mp-text);
  --sub: var(--mp-text-secondary);
  --accent: var(--mp-purple-700);
  --accent2: var(--mp-purple-600);
  --red: var(--mp-danger);
  --blue: var(--mp-info);
  --gold: var(--mp-warning);
  --purple: var(--mp-purple-600);
  --green: var(--mp-success);
}

@media (max-width: 359px) {
  :root {
    --mp-header-height: 114px;
    --mp-nav-height: 64px;
  }
}