/* Порядок каскадних шарів. Має йти першим у всьому CSS. */
@layer tokens, base, components, sections, utilities;

@layer tokens {
  :root {
    /* ---- Поверхні ---- */
    --surface-primary:    #14161a;
    --surface-secondary:  #2b2e32;
    --surface-tertiary:   #60636a;
    --surface-quaternary: #808389;
    --surface-quinary:    #eaedf3;

    /* Скло. Альфа навмисно низька — шари накладаються. */
    --surface-glass-1: #f8faff1a;
    --surface-glass-2: #f8faff0a;
    --surface-glass-3: #f8faff03;

    --surface-scrim:     #14161a4d;
    --surface-separator: #bec1c799;

    /* ---- Текст ---- */
    --label-primary:    #f8faff;
    --label-secondary:  #dbdee4;
    --label-tertiary:   #bec1c7;
    --label-quaternary: #a1a5ac;
    --label-quinary:    #808389;

    /* ---- Акценти ---- */
    --accent-primary:   #00fdff;
    --accent-secondary: #ff4d00;
    --control-primary:  #ff4d00;
    --control-outlined: #dbdee4;

    /* ---- Відступи ---- */
    --sp-4: .25rem;  --sp-8: .5rem;   --sp-12: .75rem; --sp-16: 1rem;
    --sp-20: 1.25rem; --sp-24: 1.5rem; --sp-32: 2rem;  --sp-40: 2.5rem;
    --sp-56: 3.5rem; --sp-64: 4rem;   --sp-96: 6rem;   --sp-120: 7.5rem;
    --sp-160: 10rem;

    /* ---- Радіуси ---- */
    --r-8: 8px; --r-12: 12px; --r-16: 16px; --r-20: 20px; --r-full: 9999px;

    /* ---- Шрифти ---- */
    --font-display: "Geologica", ui-sans-serif, system-ui, sans-serif;
    --font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;

    /* Заголовки плавні: нижня межа — мобільна, верхня — з макета. */
    --fs-h1: clamp(2.25rem, 1.6rem + 2.667vw, 4rem);
    --fs-h2: clamp(1.75rem, 1.286rem + 1.905vw, 3rem);
    --fs-h3: clamp(1.5rem, 1.314rem + .762vw, 2rem);
    --fs-h4: clamp(1.25rem, 1.157rem + .381vw, 1.5rem);
    --fs-h5: clamp(1.125rem, 1.079rem + .19vw, 1.25rem);

    --fs-subtitle-1: 1.125rem;
    --fs-body-1:     1rem;
    --fs-body-2:     .875rem;
    --fs-subtitle-2: .875rem;
    --fs-caption:    .75rem;
    --fs-overline:   .75rem;

    /* ---- Розкладка ---- */
    --container: 1200px;
    --gutter: 1rem;
    --section-pad: clamp(3.5rem, 2rem + 5vw, 7.5rem);

    /* ---- Рух ---- */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --dur-fast: .15s;
    --dur: .25s;
    --dur-slow: .4s;
  }

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