/* ==========================================================================
   NÜKT — Design tokens
   --------------------------------------------------------------------------
   Джерело: Figma "NUKT Copy" (gChzMJzp9jViIywYTRMgFq),
   фрейм 1002:2 "NÜKT · Desktop 1440".

   У файлі Figma не оголошено жодної змінної (Variables), тому всі токени
   виведені з сирих значень вузлів. У коментарях — node-id, звідки взято.

   Мобільного макета немає: типографіка масштабується через clamp(),
   розкладка — через Grid/Flex. Це Graceful Degradation, не Mobile First.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts

   Figma віддає гарнітуру як "Arimo" (метричний клон Arial), ваги 400 і 700.
   local() стоїть першим: якщо Arimo вже є в системі — файл не тягнеться.
   Поки .ttf не покладено в assets/fonts/, рендер іде на Arial — метрики
   збігаються 1:1, тому верстка не поїде.

   УВАГА: у макеті немає жодного курсиву — усі заголовки й кнопки це Bold
   прямий. Для верстки потрібен саме Arimo-Bold.ttf, тому правила для курсиву немає.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Arimo';
  src: local('Arimo'), local('Arimo-Regular'),
       url('../assets/fonts/Arimo-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Arimo';
  src: local('Arimo Bold'), local('Arimo-Bold'),
       url('../assets/fonts/Arimo-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------------------
     COLORS
     ---------------------------------------------------------------------- */

  /* Поверхні */
  --color-white:            #ffffff;
  --color-bg:               #ffffff;  /* Header 1002:3, Hero 1008:8            */
  --color-bg-tint:          #e5f0f9;  /* секція "Where to buy" 1002:319        */
  --color-bg-soft:          #f9f9fa;  /* секція "Who is NÜKT" 1002:448         */
  --color-surface:          #e7edf2;  /* неактивна таб-пігулка картки 1054:33  */
  --color-bg-dark:          #231f20;  /* секція "Contact + Footer" 1002:460    */

  /* Текст і чорнило */
  --color-ink:              #141a1f;  /* фон primary-кнопки, бордер хедера     */
  --color-text:             #1a2228;  /* заголовки, текст secondary-кнопки     */
  --color-text-muted:       #66727c;  /* нав-лінки 1002:6, lead-параграфи      */
  --color-text-subtle:      #9aa6af;  /* неактивні мови в хедері 1002:18       */
  --color-text-inverse:     #ffffff;  /* текст на темному                      */
  --color-text-muted-dark:  #8e9ba6;  /* приглушений текст на темному 1002:469 */

  /* Акценти */
  --color-accent:           #2f7db5;  /* усі eyebrow-мітки, підписи A · B · D  */
  --color-swiss-red:        #e30000;  /* бейдж "Swiss made" 1272:32            */
  --color-dot-idle:         #d9d9d9;  /* неактивна крапка слайдера 1339:53     */

  /* Лінії */
  --color-border:           #141a1f;                    /* хедер, кнопки      */
  --color-border-soft:      rgba(20, 26, 31, 0.14);     /* поля форм          */
  --color-border-dark:      rgba(255, 255, 255, 0.15);  /* розділювачі футера */

  /* Стани */
  --color-focus:            #2f7db5;
  --color-error:            #e30000;
  --color-overlay:          rgba(20, 26, 31, 0.62);

  /* ------------------------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------------------- */
  --font-family-base: 'Arimo', Arial, 'Helvetica Neue', Helvetica, sans-serif;

  --font-weight-regular: 400;
  --font-weight-bold:    700;

  /* Розміри: min — те, що лишається читабельним на 375px,
     max — точне значення з макета на 1440px.                                */
  --font-size-display-xl: clamp(2.75rem,  6.70vw, 6rem);      /* 44 → 96  1002:324 */
  --font-size-display-l:  clamp(2.5rem,   5.00vw, 4.5rem);    /* 40 → 72  1002:464 */
  --font-size-h2:         clamp(1.75rem,  3.05vw, 2.75rem);   /* 28 → 44  1002:57  */
  --font-size-h2-sm:      clamp(1.625rem, 2.80vw, 2.5rem);    /* 26 → 40  1002:342 */
  --font-size-h3:         clamp(1.5rem,   2.20vw, 2rem);      /* 24 → 32  1188:3   */
  --font-size-h4:         clamp(1.125rem, 1.40vw, 1.25rem);   /* 18 → 20  1002:182 */
  --font-size-h5:         1.0625rem;                          /* 17       1002:468 */
  --font-size-lead:       clamp(1rem,     1.20vw, 1.0625rem); /* 16 → 17  1002:58  */
  --font-size-body:       0.875rem;                           /* 14       1002:6   */
  --font-size-label:      0.8125rem;                          /* 13       1002:467 */
  --font-size-eyebrow:    0.75rem;                            /* 12       1002:56  */

  /* Міжрядковий інтервал */
  --line-height-display-l: 0.98;  /* 1002:464 */
  --line-height-display:   1.04;  /* 1002:324, 1002:57, 1002:342 */
  --line-height-heading:   1.12;  /* 1188:3   */
  --line-height-body:      1.5;   /* 1002:469 */
  --line-height-lead:      1.6;   /* 1002:58  */

  /* Міжлітерний інтервал (у Figma в px — переведено в em) */
  --letter-spacing-display-l: -0.03em;  /* -2.16px / 72px */
  --letter-spacing-display:   -0.02em;  /* -1.92px / 96px */
  --letter-spacing-heading:   -0.015em; /* -0.48px / 32px */
  --letter-spacing-h4:        -0.01em;  /* -0.20px / 20px */
  --letter-spacing-label:      0.05em;  /*  0.65px / 13px */
  --letter-spacing-eyebrow:    0.16em;  /*  1.92px / 12px */

  /* ------------------------------------------------------------------------
     SPACING (крок 4px)
     ---------------------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  30px;
  --space-8:  36px;
  --space-9:  48px;
  --space-10: 56px;
  --space-11: 72px;
  --space-12: 120px;

  /* ------------------------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------------------- */
  /* У макеті контентна колонка 1200px при ширині сторінки 1440 (1002:465).
     Піднято до 1600, щоб на широких моніторах хедер і шапки секцій не
     тулилися в центрі. Лід усередині .section-head лишається вузьким
     (709px) — довгі рядки тексту на 2560px нечитабельні.                   */
  --container-max:         1600px;
  --gutter:                clamp(20px, 8.34vw, 120px); /* паддінг секції 120 */
  --section-padding-block: clamp(56px, 8vw, 120px);

  /* Стеля пропорційного масштабування композицій (hero, слайдер).
     До 1920 усе росте разом із шириною екрана в тих самих пропорціях, що й
     макет; далі висота й розміри медіа заморожуються, інакше на 2560px
     блоки стали б вищими за екран.
     Усі верхні межі clamp() нижче = значення з макета × (1920 / 1440).      */
  --scale-max: 1920px;

  --header-padding-block: 18px;  /* 1002:3  */
  --logo-width:           133px; /* 1041:16 */
  --logo-height:          39px;

  /* Реальна висота sticky-хедера. Стартове значення = 18*2 + 39 + 1px бордер;
     js/nav.js перемірює його по факту (на мобільному хедер вищий через
     тумблер 44px) і переписує змінну. Від неї залежать: верх мобільної
     шторки навігації з підкладкою та scroll-padding-top — тобто те, де саме
     зупиняється сторінка при переході за якорем. */
  --header-height: 76px;

  --eyebrow-dot-size: 6px;  /* 1002:55 */
  --grid-gap:         22px; /* сітка продуктів 1002:175 */

  /* ------------------------------------------------------------------------
     RADIUS / BORDERS / SHADOWS
     ---------------------------------------------------------------------- */
  --radius-pill: 100px; /* усі кнопки й пігулки 1002:327 */
  --radius-md:   12px;
  --radius-sm:   8px;

  --border-width: 1px;

  --shadow-popup: 0 24px 64px rgba(20, 26, 31, 0.28);

  /* ------------------------------------------------------------------------
     BUTTONS
     ---------------------------------------------------------------------- */
  --button-padding-block:  15px; /* 1002:327 */
  --button-padding-inline: 24px;
  --button-font-size:      var(--font-size-body);

  /* ------------------------------------------------------------------------
     MOTION / LAYERS
     ---------------------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: var(--transition-base-duration) ease;

  /* Тривалість окремо: потрібна як затримка для visibility у шторці
     навігації (transition: visibility 0s linear <затримка>). */
  --transition-base-duration: 240ms;

  --z-header: 100;
  --z-nav-backdrop: 1;   /* усередині стекового контексту хедера */
  --z-nav-drawer:   2;
  --z-popup:  1000;

  /* ------------------------------------------------------------------------
     BREAKPOINTS — довідково

     CSS-змінні НЕ працюють усередині @media, тому в media-запитах ці
     значення пишуться літералами. Тут вони лежать як єдине джерело правди
     для документації та для читання з JS:
       getComputedStyle(document.documentElement).getPropertyValue('--bp-md')
     ---------------------------------------------------------------------- */
  --bp-xs:  480px;
  --bp-md:  768px;  /* нижче цього все складається в одну колонку */
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1440px; /* ширина макета */
}