/* =====================================================
   SYNTERA - Design Tokens
   Централизованная система дизайна
===================================================== */

:root {
    /* ===== Цвета ===== */
    --color-primary: #6b5fa8;
    --color-accent: #6b5fa8;
    --color-dark: #1f2937;
    --color-light-bg: #f9fafb;
    --color-text: #111827;
    --color-text-secondary: #6b7280;
    --color-white: #ffffff;

    /* Градиенты */
    --gradient-main: linear-gradient(180deg, #d2a3d7 0%, #8c8fdf 33%, #98b1e9 66%, #aad6f2 100%);
    --gradient-purple: linear-gradient(135deg, #d2a3d7, #c696d2);
    --gradient-blue: linear-gradient(135deg, #8c8fdf, #98b1e9);

    /* ===== Типографика ===== */
    --font-main: 'Delecta', sans-serif;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-bold: 700;

    /* Размеры шрифтов */
    --font-size-xs: 0.63rem;      /* 10px */
    --font-size-sm: 0.72rem;      /* 11.5px */
    --font-size-base: 0.81rem;    /* 13px */
    --font-size-md: 0.99rem;      /* 15.8px */
    --font-size-lg: 1.08rem;      /* 17.3px */
    --font-size-xl: 1.44rem;      /* 23px */
    --font-size-2xl: 2.16rem;     /* 34.5px */
    --font-size-3xl: 2.52rem;     /* 40.3px */
    --font-size-4xl: 3.6rem;      /* 57.6px */
    --font-size-5xl: 8.55rem;     /* 136.8px */

    /* ===== Отступы (Spacing) ===== */
    --space-xs: 0.36rem;      /* 5.76px */
    --space-sm: 0.54rem;      /* 8.64px */
    --space-base: 0.72rem;    /* 11.52px */
    --space-md: 0.9rem;       /* 14.4px */
    --space-lg: 1.08rem;      /* 17.28px */
    --space-xl: 1.44rem;      /* 23.04px */
    --space-2xl: 1.8rem;      /* 28.8px */
    --space-3xl: 2.16rem;     /* 34.56px */
    --space-4xl: 2.88rem;     /* 46.08px */
    --space-5xl: 3.6rem;      /* 57.6px */
    --space-6xl: 4rem;        /* 64px */
    --space-7xl: 6rem;        /* 96px */
    --space-8xl: 8rem;        /* 128px */
    --space-10xl: 10rem;      /* 160px */

    /* ===== Breakpoints (для использования в JS или calc) ===== */
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-wide: 1440px;

    /* ===== Border Radius ===== */
    --radius-sm: 11.7px;
    --radius-md: 14.4px;
    --radius-lg: 17.1px;
    --radius-full: 50%;

    /* ===== Shadows ===== */
    --shadow-sm: 0 1.8px 10.8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 5.4px 17.1px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 9px 23.4px rgba(99, 102, 241, 0.15);
    --shadow-text: 0 2px 20px rgba(0, 0, 0, 0.4);

    /* ===== Transitions ===== */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.4s ease;
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* ===== Z-index layers ===== */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 999;
    --z-modal: 1000;
    --z-navigation: 1000;
    --z-tooltip: 1001;
}

/* ===== Стандартизированные медиа-запросы ===== */
/*
  Использование:
  - Mobile: max-width: 480px
  - Tablet: max-width: 768px
  - Desktop: min-width: 769px
  - Desktop Large: max-width: 1024px
  - Wide: min-width: 1440px
*/