:root {
  --color-page-bg: #f0f0f0;
  --color-surface: #ffffff;
  --color-surface-muted: #f7f7f7;
  --color-text: #101010;
  --color-text-muted: #5f6368;
  --color-text-soft: #8b8f95;
  --color-line: #e3e7ed;
  --color-control-border: #d2d7df;
  --color-control-surface: #eceef2;
  --color-accent: #e20e0e;
  --color-accent-light: #ff4b4b;
  --color-accent-dark: #b80b0b;
  --color-brand: #5f8cff;
  --color-brand-dark: #4066c3;
  --color-overlay: rgba(16, 16, 16, 0.75);
  --color-success: #1a8f4c;
  --color-error: #c2322b;

  --font-family-base: "Manrope", Arial, sans-serif;

  --container-width: 1290px;

  --radius-xs: 7px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 30px;

  --space-2xs: 6px;
  --space-xs: 10px;
  --space-sm: 14px;
  --space-md: 20px;
  --space-lg: 28px;
  --space-xl: 40px;
  --space-2xl: 60px;
  --space-3xl: 90px;

  --shadow-sm: 0 4px 14px rgba(16, 16, 16, 0.08);
  --shadow-md: 0 10px 30px rgba(16, 16, 16, 0.12);
  --shadow-icon-hover: 0 6px 14px rgba(16, 16, 16, 0.18);

  --transition-fast: 0.18s ease;
  --transition-base: 0.28s ease;
}