/* ============================================================
   FLEXYPRO AI — Design Tokens (Single Source of Truth)
   ============================================================
   Все цвета, отступы, типографика, радиусы — здесь.
   Подключать ПЕРВЫМ, до responsive.css/header.css/motion.css.

   Editorial-grade typography:
   - Manrope для кириллицы и латиницы
   - Track adjustments по размеру (-0.02em…+0.04em)
   - Vertical rhythm по line-height

   AAA Contrast (на --bg #080707):
   - --ink    #f5f1ed  ≈ 18.1:1  ✓ AAA
   - --ink-mute  0.62  ≈ 11.2:1  ✓ AAA
   - --ink-faint 0.38  ≈  6.7:1  ✓ AA  (не использовать для важного текста)
   ============================================================ */

:root {
  color-scheme: dark;

  /* ============ Color — палитра ============ */
  --bg:           #080707;
  --bg-elev:      #0f0e0e;
  --bg-card:      #141414;
  --bg-card-hov:  #181818;
  /* aliases used by older pages */
  --card:         #141414;
  --card-hov:     #181818;
  --card-elev:    #181818;
  --border:       #1F1F1F;
  --border-hov:   #2A2A2A;
  --border-soft:  #2A2A2A;
  --hairline:     rgba(245,241,237,0.08);

  --ink:          #f5f1ed;
  --ink-mute:     rgba(245,241,237,0.62);
  --ink-faint:    rgba(245,241,237,0.38);
  --ink-dim:      rgba(245,241,237,0.28);
  /* legacy alias */
  --text:         #f5f1ed;
  --muted:        rgba(245,241,237,0.62);
  --dim:          rgba(245,241,237,0.38);

  --ember:        #FD6143;
  --ember-2:      #FD7D5A;
  --ember-soft:   rgba(253,97,67,0.16);
  --ember-glow:   rgba(253,97,67,0.22);
  --ember-line:   rgba(253,97,67,0.42);

  --teal:         #3F666B;
  --sage:         #79827F;
  --ivory:        #F5F0E6;

  --green:        #4ADE80;
  --green-soft:   rgba(74,222,128,0.16);
  --red:          #F87171;
  --red-soft:     rgba(248,113,113,0.16);
  --amber:        #FBBF24;

  /* ============ Spacing — 4px scale ============ */
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  24px;
  --s6:  32px;
  --s7:  48px;
  --s8:  64px;
  --s9:  96px;
  --s10: 128px;
  --section-y: clamp(60px, 8vw, 128px);
  --container-max: 1280px;

  /* ============ Typography — fluid scale ============ */
  --fs-micro:   11px;
  --fs-eyebrow: 11px;
  --fs-small:   13px;
  --fs-body:    16px;
  --fs-body-l:  18px;
  --fs-h3:      clamp(20px, 2.5vw, 28px);
  --fs-h2:      clamp(28px, 3.5vw, 44px);
  --fs-h1:      clamp(40px, 5.5vw, 80px);
  --fs-hero:    clamp(48px, 7vw, 104px);
  --fs-display: clamp(72px, 9vw, 144px);

  /* Letter-spacing — track adjustments для Manrope (RU/EN) */
  --ls-hero:    -0.02em;   /* >32px */
  --ls-h:       -0.015em;  /* 24..32px */
  --ls-body:    -0.005em;  /* 16..18px */
  --ls-micro:    0.04em;   /* <14px */
  --ls-eyebrow:  0.24em;   /* uppercase eyebrows */

  /* Vertical rhythm — line-height по размеру */
  --lh-hero:  1.05;
  --lh-h:     1.15;
  --lh-h3:    1.25;
  --lh-body:  1.6;
  --lh-mute:  1.5;

  /* ============ Radius — 4 уровня ============ */
  --r-sm:   2px;     /* кнопки sharp */
  --r-md:   4px;     /* cards */
  --r-lg:   8px;     /* chips/inputs */
  --r-xl:   14px;    /* panels: modal, chat */
  --r-pill: 999px;   /* chips, FAB */

  /* ============ Easing ============ */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in:     cubic-bezier(.4, 0, 1, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);

  /* ============ Duration ============ */
  --d-micro:   180ms;
  --d-normal:  280ms;
  --d-slow:    480ms;

  /* ============ Shadow / Glow ============ */
  --shadow-card:  0 2px 12px rgba(0,0,0,0.30);
  --shadow-lift:  0 8px 24px rgba(0,0,0,0.45);
  --shadow-ember: 0 8px 32px rgba(253,97,67,0.22);
}

/* ============================================================
   Editorial typography helpers — apply to common elements
   ============================================================ */

/* Letter-spacing adjustment под размер шрифта */
.t-hero, .hero__h, h1.hero, .display, .fs-hero, .fs-display {
  letter-spacing: var(--ls-hero);
  line-height: var(--lh-hero);
}
.t-h, h1, h2,
.fs-h1, .fs-h2 {
  letter-spacing: var(--ls-h);
  line-height: var(--lh-h);
}
.t-h3, h3, .fs-h3 {
  letter-spacing: var(--ls-h);
  line-height: var(--lh-h3);
}
.t-body, .fs-body, .fs-body-l {
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
}
.t-mute, .ink-mute {
  letter-spacing: var(--ls-body);
  line-height: var(--lh-mute);
  color: var(--ink-mute);
}
.t-micro, .micro, .eyebrow, .fs-micro, .fs-eyebrow {
  letter-spacing: var(--ls-micro);
  line-height: var(--lh-mute);
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--ember);
  font-weight: 500;
}

/* ============================================================
   Unified hover-states (применяются опционально)
   ============================================================ */

.card-hoverable {
  transition: transform var(--d-normal) var(--ease-out),
              box-shadow var(--d-normal) var(--ease-out),
              border-color var(--d-normal) var(--ease-out);
}
.card-hoverable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-ember);
}

.btn-hoverable {
  transition: filter var(--d-micro) var(--ease-out),
              box-shadow var(--d-micro) var(--ease-out),
              transform var(--d-micro) var(--ease-out);
}
.btn-hoverable:hover {
  filter: brightness(1.05);
  box-shadow: var(--shadow-lift);
}

.chip-hoverable {
  transition: transform var(--d-micro) var(--ease-out),
              border-color var(--d-micro) var(--ease-out),
              color var(--d-micro) var(--ease-out);
}
.chip-hoverable:hover {
  transform: scale(1.05);
  border-color: var(--ember);
}

/* ============================================================
   Reduced motion — disable hover transforms
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .card-hoverable,
  .btn-hoverable,
  .chip-hoverable {
    transition: none !important;
  }
  .card-hoverable:hover,
  .btn-hoverable:hover,
  .chip-hoverable:hover {
    transform: none !important;
  }
}