:root {
  /* Brand */
  --pp-red-rgb: 228 27 74;
  --pp-red: rgb(var(--pp-red-rgb)); /* #e41b4a */
  --pp-red-600: #b00012;
  --pp-red-400: #f05070;
  --pp-red-50: #fef2f4;
  --pp-yellow: #fff200;
  --pp-green: #00a651;
  --pp-blue: #1f2e5f;
  --pp-cyan: #1ec0d2;
  --pp-magenta: #e30c89;
  --pp-black: #0b0b0c;

  /* Neutrals */
  --gray-900-rgb: 15 23 42;
  --gray-900: rgb(var(--gray-900-rgb));
  --gray-700: #374151;
  --gray-500: #6b7280;
  --gray-300: #d1d5db;
  --gray-200: #e5e7eb;
  --gray-100: #f1f5f9;
  --gray-50: #f8fafc;
  --white: #fff;

  /* Semantic */
  --color-bg: var(--gray-50);
  --color-bg-alt: var(--white);
  --color-surface: var(--white);
  --color-surface-alt: var(--gray-100);
  --color-text: var(--gray-900);
  --color-text-muted: var(--gray-700);
  --color-text-subtle: var(--gray-500);
  --color-border: rgb(var(--gray-900-rgb) / 8%);
  --color-border-strong: rgb(var(--gray-900-rgb) / 14%);
  --color-brand: var(--pp-red);
  --color-brand-hover: var(--pp-red-600);
  --color-brand-soft: var(--pp-red-50);
  --color-brand-ring: rgb(var(--pp-red-rgb) / 25%);
  --color-danger: #dc2626;
  --color-success: var(--pp-green);
  --color-warning: #d97706;
}

:root {
  --font-display: 'Cormorant Garamond', georgia, serif;
  --font-body: 'Onest', system-ui, -apple-system, segoe ui, roboto, sans-serif;
  --font-ui: 'DM Sans', var(--font-body);
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;

  /* Размеры (rem от 16px root) */
  --fs-2xs: 0.6875rem; /* 11 */
  --fs-xxs: 0.625rem; /* 10 */
  --fs-xs-plus: 0.7188rem; /* 11.5 */
  --fs-ui-md: 1.0625rem; /* 17 */
  --fs-hero-stat: 4.5rem; /* 72 */
  --fs-display-sm: 1.625rem; /* 26 */
  --fs-display-md: 1.875rem; /* 30 */
  --fs-icon-lg: 1.75rem; /* 28 */
  --fs-xs: 0.75rem; /* 12 */
  --fs-sm: 0.8125rem; /* 13 */
  --fs-md: 0.875rem; /* 14 */
  --fs-base: 0.9375rem; /* 15 */
  --fs-lg: 1rem; /* 16 */
  --fs-xl: 1.125rem; /* 18 */
  --fs-2xl: 1.25rem; /* 20 */
  --fs-3xl: 1.375rem; /* 22 */
  --fs-4xl: clamp(1.6rem, 2.4vw + 1rem, 2.25rem);
  --fs-5xl: clamp(2rem, 3vw + 1rem, 3rem);

  /* Line-heights */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  /* Letter-spacing */
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
}

:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
}

:root {
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-full: 999px;
}

:root {
  --shadow-xs: 0 1px 2px rgb(var(--gray-900-rgb) / 6%);
  --shadow-sm: 0 2px 6px rgb(var(--gray-900-rgb) / 8%);
  --shadow-md: 0 8px 24px rgb(var(--gray-900-rgb) / 10%);
  --shadow-lg: 0 18px 55px rgb(var(--gray-900-rgb) / 14%);
  --shadow-xl: 0 24px 80px rgb(var(--gray-900-rgb) / 20%);
  --ring-brand: 0 0 0 4px rgb(var(--pp-red-rgb) / 16%);
  --ring-focus: 0 0 0 3px rgb(var(--pp-red-rgb) / 40%);
  --ring-danger: 0 0 0 3px rgb(220 38 38 / 30%);
}

:root {
  --z-below: 0;
  --z-base: 1;
  --z-elevated: 2;
  --z-sticky: 20;
  --z-float: 50;
  --z-drawer: 60;
  --z-fab: 70;
  --z-dropdown: 30;
  --z-overlay: 90;
  --z-modal: 100;
  --z-toast: 110;
  --z-tooltip: 120;
  --z-overlay-high: 999;
  --z-skip: 1000;
  --z-max: 9999;
}

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-0: 0ms;
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 250ms;
  --dur-4: 400ms;
  --dur-5: 600ms;
  --dur-6: 350ms;
  --t-fast: var(--dur-1) var(--ease-out);
  --t-normal: var(--dur-2) var(--ease-out);
  --t-slow: var(--dur-3) var(--ease-out);
  --t-ui: var(--dur-6) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
    --dur-4: 0ms;
    --dur-5: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

:root[data-theme='dark'] {
  --color-bg: #0b0b0c;
  --color-surface: #17171a;
  --color-surface-alt: #1f1f23;
  --color-text: #f5f5f7;
  --color-text-muted: #c7c7cc;
  --color-text-subtle: #8e8e93;
  --color-border: rgb(255 255 255 / 8%);
  --color-border-strong: rgb(255 255 255 / 14%);
  --color-brand-soft: rgb(var(--pp-red-rgb) / 15%);
  --shadow-sm: 0 2px 6px rgb(0 0 0 / 40%);
  --shadow-md: 0 10px 28px rgb(0 0 0 / 45%);
  --shadow-lg: 0 24px 70px rgb(0 0 0 / 55%);
}