:root {
  /* Fonts */
  --font-main: 'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Brand / Accent */
  --color-accent-50:  #FFF5F5;
  --color-accent-100: #EFD1D1;
  --color-accent-200: #EFB9B9;

  /* Neutral */
  --color-white: #FFFFFF;
  --color-gray-50: #F8F8F8;
  --color-gray-200: #D4D4D8;
  --color-black: #000000;

  /* Semantic */
  --color-bg: var(--color-white);
  --color-bg-soft: var(--color-gray-50);
  --color-bg-accent: var(--color-accent-50);

  --color-border: var(--color-gray-200);

  --color-text: var(--color-black);
  --color-text-muted: #52525B;

  --color-primary: var(--color-accent-200);
  --color-primary-hover: var(--color-accent-100);

  /* Breakpoints (информативно) */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-xxl: 1420px;

  /* Container widths like Bootstrap-ish */
  --container-sm: 560px;
  --container-md: 740px;
  --container-lg: 980px;
  --container-xl: 1160px;
  --container-xxl: 1360px;

  /* Padding по умолчанию (desktop) */
  --container-padding: 20px;

  /* Grid */
  --grid-gap: 24px;

  /* Radius */
  --radius-sm: 12px;
  --radius-md: 24px;
  --radius-lg: 50px;

  /* Transitions */
  --transition-base: 0.2s ease;
}

/* Адаптивные токены: меняем padding/gap по экрану */
@media (max-width: 1200px) {
  :root {
    --container-padding: 20px;
    --grid-gap: 20px;
  }
}

@media (max-width: 900px) {
  :root {
    --container-padding: 18px;
    --grid-gap: 18px;
  }
}

@media (max-width: 600px) {
  :root {
    --container-padding: 16px;
    --grid-gap: 16px;
  }
}