:root {
  --color-ink-strong: #1c2134;
  --color-ink: #2a3148;
  --color-text: #1c2134;
  --color-muted: #5a6276;
  --color-muted-strong: #434c63;
  --color-surface: rgba(255, 255, 255, 0.95);
  --color-surface-strong: #ffffff;
  --color-surface-alt: rgba(235, 239, 250, 0.94);
  --color-background: #f5f6fb;
  --color-background-deep: #ebeffa;
  --color-border: rgba(177, 185, 204, 0.45);
  --color-border-strong: rgba(138, 149, 176, 0.52);
  --color-primary: #4258ff;
  --color-primary-strong: #5f73ff;
  --color-accent: #0da6ff;
  --color-accent-strong: #2378d9;
  --color-accent-soft: rgba(13, 166, 255, 0.12);
  --color-brand-orange: #ff8b17;
  --color-brand-orange-soft: rgba(255, 139, 23, 0.18);
  --color-success-soft: rgba(59, 115, 90, 0.12);
  --color-white: #ffffff;
  --color-glow-start: rgba(143, 158, 255, 0.2);
  --color-glow-end: rgba(13, 166, 255, 0.12);
  --gradient-page: var(--color-background);
  --gradient-hero: linear-gradient(140deg, #ffffff, rgba(235, 239, 250, 0.94));
  --gradient-panel:
    linear-gradient(120deg, rgba(66, 88, 255, 0.9), rgba(13, 166, 255, 0.9));
  --gradient-accent:
    linear-gradient(135deg, rgba(143, 158, 255, 0.2), rgba(13, 166, 255, 0.12));
  --gradient-button: linear-gradient(135deg, #ff8b17 0%, #ffa13a 100%);
  --shadow-soft: 0 14px 34px rgba(163, 175, 209, 0.3);
  --shadow-md: 0 18px 46px rgba(70, 82, 128, 0.15);
  --shadow-xl: 0 30px 80px rgba(43, 54, 108, 0.22);
  --radius-xl: 36px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --max-width: min(1240px, calc(100vw - 40px));
}