:root {
  /* Colors */
  --color-primary: #2563eb;
  --color-secondary: #111827;
  --color-accent: #f59e0b;
  --color-bg: #ffffff;
  --color-text: #1f2937;
  --color-muted: #6b7280;

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-xxl: 48px;

  /* Typography */
  --font-base: 16px;
  --font-lg: 20px;
  --font-xl: 28px;
  --font-2xl: 36px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-xxl: 24px;

  /* Shadow */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.15);

  /* Container width */

  --container-width-50: 2400px;
  --container-width-45: 2160px;
  --container-width-40: 1920px;
  --container-width-35: 1680px;
  --container-width-30: 1440px;
  --container-width-25: 1200px;
  --container-width-20: 960px;
  --container-width-15: 720px;
  --container-width-10: 480px;
  --container-width-5: 240px;

  /* Container hight */
  --container-hight-5: 50px;
}