/*
 * Nightlink — Design Tokens
 * Monochrome Pure · Tesla/Framer minimalism
 * v1.0 · 2026-04-21
 *
 * Use: <link rel="stylesheet" href="/static/brand/tokens.css">
 * then consume via var(--token-name)
 */

:root{

  /* ========================================
   * 1. PALETTE — Monochrome Pure
   * Только чёрный / белый / серые.
   * Акцентных цветов НЕТ по бренд-гайду.
   * ======================================== */

  --void:        #0A0A0A;   /* главный фон — «ночь» */
  --surface:     #111113;   /* карточки, поднятые поверхности */
  --surface-2:   #18181B;   /* вложенные поверхности */

  --dim-3:       #4A4A4F;   /* приглушённый серый — подписи */
  --dim-2:       #6B6B70;   /* вспомогательный текст */
  --dim-1:       #A1A1A6;   /* основной серый (eyebrow, метки) */

  --light:       #F5F5F7;   /* основной текст на тёмном */
  --white:       #FFFFFF;   /* чистый белый — CTA, инверсия */

  --border:          rgba(255,255,255,.08);  /* дефолтная линия */
  --border-strong:   rgba(255,255,255,.16);  /* акцентная линия */
  --overlay:         rgba(10,10,10,.72);     /* затемнение поверх */

  /* ========================================
   * 2. TYPOGRAPHY
   * Inter Tight — display (headings).
   * Inter — body (UI, текст).
   * Оба с Google Fonts, лицензия SIL OFL.
   * ======================================== */

  --font-display: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter',       system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Шкала размеров (mobile-first, clamp задаётся на уровне компонентов) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   21px;
  --fs-xl:   28px;
  --fs-2xl:  40px;
  --fs-3xl:  56px;
  --fs-4xl:  80px;
  --fs-5xl:  120px;

  /* Вес */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* Межбуквенное расстояние */
  --ls-tight:   -.045em;   /* h1 */
  --ls-snug:    -.03em;    /* h2/h3 */
  --ls-normal:  0;
  --ls-wide:    .1em;      /* label, h4 */
  --ls-wider:   .25em;     /* eyebrow */

  /* Высота строки */
  --lh-none:    1;
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* ========================================
   * 3. SPACING — 4px базовая сетка
   * ======================================== */

  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  128px;
  --s-11:  160px;
  --s-12:  200px;

  /* ========================================
   * 4. RADII
   * ======================================== */

  --r-none:   0;
  --r-sm:     6px;
  --r-md:     10px;
  --r-lg:     16px;
  --r-xl:     24px;
  --r-2xl:    32px;
  --r-full:   999px;

  /* ========================================
   * 5. SHADOWS & BLUR
   * ======================================== */

  --shadow-sm:    0 1px 2px   rgba(0,0,0,.40);
  --shadow-md:    0 6px 18px  rgba(0,0,0,.48);
  --shadow-lg:    0 24px 56px rgba(0,0,0,.56);
  --shadow-glow:  0 0 64px    rgba(255,255,255,.06);

  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 32px;

  /* ========================================
   * 6. MOTION
   * Single easing — cubic-bezier(.22,.61,.36,1).
   * Spring — для микро-интеракций (hover scale).
   * ======================================== */

  --ease:         cubic-bezier(.22,.61,.36,1);
  --ease-spring:  cubic-bezier(.34,1.56,.64,1);
  --ease-in:      cubic-bezier(.4,0,1,1);
  --ease-out:     cubic-bezier(0,0,.2,1);

  --dur-instant: .12s;
  --dur-fast:    .2s;
  --dur:         .35s;
  --dur-slow:    .7s;
  --dur-slower:  1.2s;

  /* ========================================
   * 7. LAYOUT
   * ======================================== */

  --container-max: 1240px;
  --container-pad: clamp(20px, 4vw, 48px);

  /* Breakpoints (для reference — используй через @media) */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Z-index шкала */
  --z-base:      0;
  --z-raised:    10;
  --z-sticky:    100;
  --z-nav:       900;
  --z-dropdown:  1000;
  --z-modal:     2000;
  --z-toast:     3000;
}

/* ========================================
 * SEMANTIC ALIASES
 * Семантические имена поверх primitive.
 * Меняй эти при тёмной/светлой вариации.
 * ======================================== */

:root{
  --bg:              var(--void);
  --bg-raised:       var(--surface);
  --bg-elevated:     var(--surface-2);

  --text:            var(--light);
  --text-secondary:  var(--dim-1);
  --text-muted:      var(--dim-2);
  --text-disabled:   var(--dim-3);
  --text-inverse:    var(--void);

  --cta-bg:          var(--white);
  --cta-text:        var(--void);
  --cta-bg-hover:    var(--light);

  --ghost-border:    var(--border);
  --ghost-border-hover: var(--border-strong);
}