:root {

  /* Layout */
  --site-width: 1470px;
  --sidebar-width: 74px;
  --container-padding: 80px;

  /* Typography */
  --font-headline: 'Bebas Neue Local', sans-serif;
  --font-body: "Helvetica Neue", sans-serif;
  --font-size-text: 18px;
  --font-heading-weight: 500;
  --font-heading-weight-text: 600;

  /* Colors */
  --color-bg-main: #6fa2cf;
  --color-bg-dark: #121212;
  --color-surface: rgba(255, 255, 255, 0.08);
  --color-text: #ffffff;
  --color-text-dark: #111111;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-muted: rgba(255, 255, 255, 0.8);
  --color-yellow: #ffd400;
  --color-yellow-hover: #ffe15a;
  --color-border: rgba(255, 255, 255, 0.18);
  --color-card-bg: #f3f3f3;
  --color-panel-blue: #2c678a;
  --color-link-blue: #24496b;
  --color-faq-blue: #6cc6dd;

  /* Scrollbar */
  --scrollbar-track: #111111;
  --scrollbar-thumb: var(--color-yellow);
  --scrollbar-thumb-border: #000000;

  /* Components */
  --topbar-height: 56px;
  --hero-gap: 24px;
  --radius-sm: 6px;
  --radius-md: 10px;

  /* Shadows */
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.22);
  --shadow-card: 5px 10px 20px rgba(0, 0, 0, 1);
  --shadow-card-small: 5px 7px 5px rgba(0, 0, 0, 1);
}