/* ==========================================================================
   ДИФ — design tokens
   Единственный источник правды для цвета, типографики, отступов, радиусов,
   теней и анимаций. Компоненты используют только семантические токены
   (--c-*, --text-*, --space-*), а не сырые значения палитры.
   ========================================================================== */

/* Зарегистрированные свойства: браузер вычисляет их в px, поэтому JS-модуль
   фигурных масок (shape.js) читает готовые размеры срезов через getComputedStyle. */
@property --cut-tl { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --cut-tr { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --cut-br { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --cut-bl { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --shape-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --r-tl { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --r-tr { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --r-br { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --r-bl { syntax: "<length>"; inherits: false; initial-value: 0px; }

:root {
    /* ---------- Palette (raw) ---------- */
    --mint-50: #effcf7;
    --mint-100: #d7f9ee;   /* активный пункт меню */
    --mint-200: #cdf0e6;   /* карточка «20+ лет» */
    --mint-400: #00fdbc;   /* главный акцент, CTA */
    --mint-450: #26fdc6;   /* hover CTA */
    --mint-500: #22c78c;   /* кнопка на тёмном, акцентный текст на тёмном */
    --mint-600: #12a774;
    --mint-700: #08805a;   /* акцентный текст на белом (AA) */
    --pine-700: #2f5a4c;   /* активный пункт меню в футере */
    --pine-800: #276249;   /* аватар */

    --ink-950: #1a1b1a;
    --ink-900: #262726;    /* футер, основной текст */
    --ink-850: #2b2b2b;    /* тёмная карточка */
    --ink-800: #333433;
    --ink-700: #444645;

    --gray-50: #f6f7f7;
    --gray-100: #eef0ef;
    --gray-150: #e9ebea;   /* серые плашки */
    --gray-200: #dfe2e1;
    --gray-300: #c9cccb;
    --gray-400: #a9adab;
    --gray-500: #8a8e8c;
    --gray-600: #5c6266;
    --white: #fff;

    /* ---------- Semantic colors ---------- */
    --c-bg: var(--white);
    --c-bg-subtle: var(--gray-50);
    --c-surface: var(--gray-150);
    --c-surface-2: var(--gray-100);
    --c-surface-dark: var(--ink-850);
    --c-surface-accent: var(--mint-200);

    --c-text: var(--ink-900);
    --c-text-muted: var(--gray-600);
    --c-text-subtle: var(--gray-500);
    --c-text-on-dark: #f3f4f3;
    --c-text-on-dark-muted: rgb(255 255 255 / 0.55);

    --c-accent: var(--mint-400);
    --c-accent-hover: var(--mint-450);
    --c-accent-strong: var(--mint-500);
    --c-accent-text: var(--mint-700);
    --c-accent-soft: var(--mint-100);

    --c-border: var(--gray-200);
    --c-border-strong: var(--ink-900);
    --c-border-on-dark: rgb(255 255 255 / 0.14);
    --c-line: var(--gray-300);       /* линия таймлайна */
    --c-focus: #0a7cff;
    --c-danger: #d6453d;

    /* ---------- Typography ---------- */
    --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Geologica", "Manrope", system-ui, sans-serif;

    /* Fluid type scale: 375px → 1440px */
    --text-xs: 0.75rem;                                     /* 12 */
    --text-sm: 0.875rem;                                    /* 14 */
    --text-base: 1rem;                                      /* 16 */
    --text-md: clamp(1rem, 0.94rem + 0.28vw, 1.125rem);     /* 16 → 18 */
    --text-lg: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem); /* 17 → 22 */
    --text-xl: clamp(1.125rem, 0.92rem + 0.9vw, 1.5rem);    /* 18 → 24 */
    --text-2xl: clamp(1.25rem, 0.98rem + 1.15vw, 2rem);     /* 20 → 32 */
    --text-3xl: clamp(1.375rem, 0.95rem + 1.85vw, 2.375rem);/* 22 → 38 */
    --text-4xl: clamp(1.75rem, 1.1rem + 2.8vw, 3.5rem);     /* 28 → 56 */
    --text-display: clamp(1.75rem, 5.06vw - 0.68rem, 3.875rem); /* 28 → 62 */
    --text-stat: clamp(2.75rem, 2.2rem + 2.2vw, 4rem);      /* 44 → 64 */

    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 800;

    --tracking-tight: -0.01em;
    --tracking-caps: 0.04em;

    /* ---------- Spacing (4px grid) ---------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Ритм секций */
    --section-gap: clamp(3.5rem, 2rem + 5vw, 7rem);
    --section-gap-sm: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);

    /* ---------- Layout ---------- */
    --container-max: 1320px;
    --gutter: clamp(1.25rem, 0.4rem + 3.6vw, 3.75rem);   /* 20 → 60 */
    --container: min(var(--container-max), 100% - 2 * var(--gutter));
    --header-h: clamp(5.5rem, 4.6rem + 3.4vw, 9.25rem);   /* 88 → 148 */
    --header-h-compact: 4.5rem;

    /* ---------- Radii ---------- */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: clamp(20px, 1rem + 1vw, 32px);
    --radius-2xl: clamp(24px, 1rem + 2vw, 40px);
    --radius-pill: 999px;

    /* ---------- Elevation ---------- */
    --shadow-xs: 0 1px 2px rgb(16 24 20 / 0.06);
    --shadow-sm: 0 2px 8px rgb(16 24 20 / 0.06), 0 1px 2px rgb(16 24 20 / 0.04);
    --shadow-md: 0 10px 30px -8px rgb(16 24 20 / 0.14), 0 2px 6px rgb(16 24 20 / 0.05);
    --shadow-lg: 0 24px 60px -16px rgb(16 24 20 / 0.22), 0 4px 12px rgb(16 24 20 / 0.06);
    --shadow-glow: 0 10px 30px -10px rgb(0 253 188 / 0.55);

    /* ---------- Motion ---------- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 150ms;
    --dur-base: 240ms;
    --dur-slow: 480ms;

    /* ---------- Z-index ---------- */
    --z-base: 1;
    --z-raised: 10;
    --z-header: 100;
    --z-dropdown: 110;
    --z-overlay: 1000;

    color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0ms;
        --dur-base: 0ms;
        --dur-slow: 0ms;
    }
}