/* Кут для анімованої рамки активного пункту меню. Без реєстрації через
   @property браузер не вміє інтерполювати кастомну властивість,
   і анімація просто не піде. */
@property --nav-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@layer tokens {
  :root {
    /* Палітра. Базовий тон не нейтрально чорний, а глибокий баклажан,
       тому фіолетовий акцент читається як частина середовища, а не як наліпка. */
    --c-void:        #100B16;
    --c-ink:         #150F1D;
    --c-surface:     #1D1526;
    --c-surface-2:   #251B31;
    --c-line:        #33263F;
    --c-line-soft:   #2A2034;

    --c-violet:      #7C4DFF;
    --c-violet-hi:   #9C79FF;
    --c-violet-lo:   #5A2FD6;
    --c-lilac:       #CFBEF5;

    --c-text:        #F3EEFA;
    --c-text-mid:    #B4A6C6;
    --c-text-dim:    #8A7C9C;

    --c-danger:      #FF6B8A;
    --c-warn:        #F2B366;
    --c-ok:          #56D6A0;

    --c-focus:       #A98CFF;

    /* Типографіка. Дисплейної гарнітури з CDN немає свідомо, тому характер
       дає не файл шрифту, а трекінг, вага і верхній регістр у знаку бренду.
       Як підключити власний шрифт локально - див. README. */
    --f-sans: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Noto Sans", sans-serif;
    /* Моноширинний прибрано: у таблицях і бейджах він читався як
       чужорідний. Вирівнювання цифр дає font-variant-numeric,
       а не сам шрифт. */
    --f-mono: var(--f-sans);

    --t-xs:   0.8125rem;
    --t-sm:   0.9375rem;
    --t-base: 1rem;
    --t-md:   1.125rem;
    --t-lg:   1.5rem;
    --t-xl:   1.875rem;
    --t-2xl:  clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem);

    /* Простір: крок 4px */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.25rem;
    --s-6: 1.5rem;
    --s-8: 2rem;
    --s-10: 2.5rem;
    --s-12: 3rem;
    --s-16: 4rem;

    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-pill: 999px;

    --sh-card: 0 24px 60px -20px rgb(0 0 0 / 0.65);
    --sh-btn:  0 10px 24px -10px rgb(124 77 255 / 0.75);

    --dur: 180ms;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}