/* =============================================================
   ДИЗАЙН-СИСТЕМА «Ключи 01»
   Палитра: warm cream + charcoal + warm taupe (quiet luxury)
   Шрифты: Outfit (geometric sans display) + Onest (sans body)
   ============================================================= */

:root {
  /* ----- ФОНЫ И ТЕКСТ ----- */
  --bg:        #F5F1ED;  /* warm cream — основной фон */
  --bg-paper:  #EDE6DD;  /* приглушённый кремовый — вторичные секции */
  --bg-card:   #FFFFFF;  /* белые карточки на cream-фоне */
  --bg-dark:   #2C2C2C;  /* тёмные секции, footer */
  --ink:       #2C2C2C;  /* charcoal — основной текст (НЕ чёрный) */
  --ink-muted: #6B645B;  /* приглушённый текст */
  --ink-soft:  #8A8278;  /* подписи, captions */
  --ink-invert: #F5F1ED; /* текст на тёмном фоне */
  --line:      #D9D1C5;  /* тонкие разделители */
  --line-soft: #E5DED2;

  /* ----- АКЦЕНТЫ ----- */
  --accent:          #8B7355;  /* warm taupe — главный CTA */
  --accent-deep:     #6B5739;  /* hover/pressed */
  --accent-soft:     rgba(139, 115, 85, 0.08);  /* hover-фон карточек */
  --accent-metallic: #B8956A;  /* warm copper для premium-акцентов */
  --gold:            #C2A878;  /* edition-acc: цифры, premium-badge */
  --ink-air:         #5C5C5C;  /* промежуточный для labels */

  /* ----- СЕМАНТИКА ----- */
  --success: #4F7B5C;  /* «Доступно сейчас» */
  --warning: #C2783C;  /* «Скоро» */
  --error:   #B23A2F;

  /* ----- RGB-ВАРИАНТЫ для rgba() ----- */
  --rgb-accent: 139, 115, 85;
  --rgb-ink:    44, 44, 44;
  --rgb-bg:     245, 241, 237;
  --rgb-gold:   194, 168, 120;

  /* =============================================================
     ТИПОГРАФИКА
     ============================================================= */
  /* Display geometric sans (для заголовков, цифр, лого) */
  --font-display: 'Outfit', 'Manrope', system-ui, sans-serif;
  --font-serif:   var(--font-display);  /* алиас — ранее использовался во всём CSS */
  --font-sans:    'Onest', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* Размеры через clamp */
  --fs-h1:      clamp(40px, 6vw, 88px);    /* hero only */
  --fs-h2:      clamp(32px, 4.5vw, 64px);  /* section titles */
  --fs-h3:      clamp(24px, 2.8vw, 36px);  /* subsections, cards */
  --fs-h4:      clamp(20px, 2vw, 26px);    /* card titles */
  --fs-display: clamp(56px, 8vw, 120px);   /* manifest pinned */
  --fs-body-l:  clamp(18px, 1.4vw, 22px);  /* lead paragraphs */
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-micro:   12px;

  /* Line-height */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.4;
  --lh-loose:  1.6;

  /* Letter-spacing */
  --ls-tight:    -0.02em;
  --ls-h1-tight: -0.022em;  /* Aman tight для H1 hero */
  --ls-snug:     -0.01em;
  --ls-normal:    0;
  --ls-wide:      0.08em;
  --ls-vertical:  0.32em;   /* для vertical labels */

  /* Variable-font axes — для Outfit оставляем normal,
     weight задаётся через font-weight */
  --font-variation-h: normal;

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

  /* =============================================================
     СКРУГЛЕНИЯ
     ============================================================= */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* =============================================================
     SPACING
     ============================================================= */
  --space-section:    clamp(80px, 10vw, 160px);  /* между секциями */
  --space-block:      clamp(40px, 5vw, 72px);    /* внутри секций */
  --space-pad-x:      clamp(24px, 6vw, 96px);    /* боковые отступы */
  --container:        1440px;
  --container-narrow: 1080px;
  --container-text:   720px;

  /* =============================================================
     ТЕНИ (тёплые, на основе ink, не чёрного)
     ============================================================= */
  --shadow-sm:    0 1px 2px rgba(44,44,44,0.04);
  --shadow-md:    0 4px 16px rgba(44,44,44,0.06);
  --shadow-lg:    0 16px 40px rgba(44,44,44,0.08);
  --shadow-hover: 0 24px 60px rgba(44,44,44,0.10);

  /* =============================================================
     ANIMATION — easing-аккорд (4 кривые на весь сайт)
     ============================================================= */
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);       /* out-expo — H1, секции */
  --ease-hover:  cubic-bezier(0.215, 0.61, 0.355, 1); /* out-cubic-soft — hover */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* out-back-soft — magnetic */
  --ease-nav:    cubic-bezier(0.4, 0, 0.2, 1);        /* material — nav transform */

  /* Алиасы для совместимости со старым кодом */
  --ease-out:    var(--ease-reveal);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --d-fast:   200ms;
  --d-base:   400ms;
  --d-nav:    320ms;     /* sticky-nav transform (#8) */
  --d-hover:  700ms;     /* card hover (#7) */
  --d-reveal: 700ms;     /* reveal-on-scroll */
  --d-slow:   800ms;
  --d-page:   1200ms;    /* lazy-load fade, hero zoom */

  /* =============================================================
     Z-INDEX SCALE
     ============================================================= */
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   2000;

  /* =============================================================
     LAYOUT
     ============================================================= */
  --header-h:        80px;
  --header-h-sticky: 64px;
  --header-h-mobile: 64px;
}

/* Reduce motion override */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast:  0ms;
    --d-base:  0ms;
    --d-slow:  0ms;
    --d-page:  0ms;
  }
}