/* ============================================================================
 * Fotofactor Design Tokens — v1.0 (2026-05-11)
 * ----------------------------------------------------------------------------
 * Единый источник дизайн-токенов для всех страниц:
 *   • Tilda overlay (6 pillar-компонентов поверх оригинальных Tilda-страниц)
 *   • Astro лендинги (16 страниц из БД)
 *   • Header + Footer (shared)
 *
 * Принципы:
 *   1. CSS variables (не SCSS) — работает inline в Tilda + Astro
 *   2. Жёлтый акцент дозированно (Hormozi-якоря, .ff-badge--accent / .ff-cta--primary)
 *   3. TildaSans — основной шрифт (наследуется от Tilda); Montserrat — landing fallback
 *   4. НЕ перекрывает оригинальный Tilda CSS (.t-records *, body.t-body не трогаем)
 *
 * Подключение:
 *   import '../styles/design-tokens.css'  (в LandingPage.astro и TildaPage.astro)
 * ========================================================================== */

:root {
  /* === BRAND COLORS ===
   * Navy (тёмный) + Gold (жёлтый) — фирменные.
   * Navy для тёмных фонов header/footer и текста pillar-компонентов.
   * Gold для главных CTA и Hormozi-якорей (дозированно). */
  --ff-color-primary:        #0f172a;   /* основной navy для текста (pillars) */
  --ff-color-primary-dark:   #0b1120;   /* header/footer фон, deepest navy */
  --ff-color-primary-soft:   #1e293b;   /* mid navy (cards/borders на тёмном фоне) */
  --ff-color-primary-rgb:    15, 23, 42;

  --ff-color-accent:         #FFD700;   /* главный жёлтый: Header CTA, лого */
  --ff-color-accent-warm:    #fbbf24;   /* тёплый amber: Hormozi маркеры в pillar */
  --ff-color-accent-deep:    #f59e0b;   /* deeper amber: фон жёлтых badge */
  --ff-color-accent-soft:    #fef3c7;   /* очень светлый жёлтый: фон info-блоков */
  --ff-color-accent-rgb:     255, 215, 0;

  --ff-color-secondary:      #2563eb;   /* синий: links, secondary CTA (Marketplace pillar) */
  --ff-color-secondary-dark: #1e40af;
  --ff-color-secondary-soft: #dbeafe;

  /* === SEMANTIC COLORS === */
  --ff-color-success:        #16a34a;
  --ff-color-success-soft:   #dcfce7;
  --ff-color-warning:        #f59e0b;
  --ff-color-warning-soft:   #fef3c7;
  --ff-color-danger:         #dc2626;
  --ff-color-danger-dark:    #7f1d1d;
  --ff-color-danger-soft:    #fef2f2;
  --ff-color-danger-border:  #fecaca;
  --ff-color-info:           #2563eb;
  --ff-color-info-soft:      #dbeafe;

  /* === NEUTRALS (slate-scale, унаследовано из pillar/header) === */
  --ff-color-black:    #050813;
  --ff-color-gray-950: #0f172a;
  --ff-color-gray-900: #1e293b;
  --ff-color-gray-800: #334155;
  --ff-color-gray-700: #475569;
  --ff-color-gray-600: #64748b;
  --ff-color-gray-500: #94a3b8;
  --ff-color-gray-400: #cbd5e1;
  --ff-color-gray-300: #e2e8f0;
  --ff-color-gray-200: #e5e7eb;
  --ff-color-gray-100: #f1f5f9;
  --ff-color-gray-50:  #f8fafc;
  --ff-color-white:    #ffffff;

  /* === TEXT === */
  --ff-color-text-primary:    var(--ff-color-gray-950);  /* основной текст */
  --ff-color-text-secondary:  var(--ff-color-gray-700);  /* подзаголовки, описания */
  --ff-color-text-muted:      var(--ff-color-gray-600);  /* подписи, note */
  --ff-color-text-faint:      var(--ff-color-gray-500);  /* очень тихий */
  --ff-color-text-on-dark:    var(--ff-color-white);
  --ff-color-text-on-accent:  var(--ff-color-primary);   /* чёрный текст на жёлтом */
  --ff-color-text-link:       var(--ff-color-secondary);

  /* === BACKGROUNDS === */
  --ff-bg-page:         var(--ff-color-white);
  --ff-bg-section:      var(--ff-color-white);
  --ff-bg-section-alt:  var(--ff-color-gray-50);    /* зебра-секция */
  --ff-bg-card:         var(--ff-color-white);
  --ff-bg-card-soft:    var(--ff-color-gray-50);
  --ff-bg-overlay:      rgba(0, 0, 0, 0.6);
  --ff-bg-dark:         var(--ff-color-primary-dark);
  --ff-bg-dark-soft:    var(--ff-color-primary);

  /* === BORDERS === */
  --ff-border-default:  var(--ff-color-gray-200);
  --ff-border-soft:     var(--ff-color-gray-100);
  --ff-border-strong:   var(--ff-color-gray-300);
  --ff-border-dark:     var(--ff-color-gray-800);
  --ff-border-accent:   var(--ff-color-accent-warm);

  /* === TYPOGRAPHY ===
   * TildaSans — главный (наследуется во всех Tilda-страницах).
   * Montserrat — используется в Header/Footer/Landings (Google Fonts).
   * Open Sans — landing body fallback. */
  --ff-font-body:    'TildaSans', 'TildaSans-Regular', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ff-font-display: 'TildaSans', 'TildaSans-Bold', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ff-font-brand:   'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-font-mono:    'SF Mono', 'JetBrains Mono', Monaco, Consolas, 'Courier New', monospace;

  --ff-font-size-xs:   12px;
  --ff-font-size-sm:   13px;
  --ff-font-size-base: 14px;   /* pillar body default */
  --ff-font-size-md:   16px;
  --ff-font-size-lg:   17px;
  --ff-font-size-xl:   18px;
  --ff-font-size-2xl:  20px;
  --ff-font-size-3xl:  24px;
  --ff-font-size-4xl:  32px;   /* pillar h2 */
  --ff-font-size-5xl:  40px;   /* pillar metric */
  --ff-font-size-6xl:  48px;
  --ff-font-size-7xl:  60px;

  --ff-font-weight-normal:   400;
  --ff-font-weight-medium:   500;
  --ff-font-weight-semibold: 600;
  --ff-font-weight-bold:     700;
  --ff-font-weight-extra:    800;
  --ff-font-weight-black:    900;

  --ff-line-height-tight:   1.15;
  --ff-line-height-snug:    1.3;
  --ff-line-height-normal:  1.5;
  --ff-line-height-relaxed: 1.55;
  --ff-line-height-loose:   1.7;

  --ff-letter-spacing-tight: -0.02em;
  --ff-letter-spacing-snug:  -0.015em;
  --ff-letter-spacing-base:  0;
  --ff-letter-spacing-wide:  0.05em;

  /* === SPACING SCALE === */
  --ff-space-xs:   4px;
  --ff-space-sm:   8px;
  --ff-space-md:   12px;
  --ff-space-lg:   16px;
  --ff-space-xl:   20px;
  --ff-space-2xl:  24px;
  --ff-space-3xl:  32px;
  --ff-space-4xl:  48px;
  --ff-space-5xl:  56px;
  --ff-space-6xl:  64px;
  --ff-space-7xl:  96px;

  /* === LAYOUT === */
  --ff-container-max:     1200px;
  --ff-container-narrow:  880px;
  --ff-container-padding: 16px;
  --ff-container-padding-lg: 20px;

  /* === BORDER RADIUS === */
  --ff-radius-xs:   4px;    /* теги, note */
  --ff-radius-sm:   6px;    /* small chip */
  --ff-radius-md:   8px;    /* badge, small card */
  --ff-radius-lg:   12px;   /* card */
  --ff-radius-xl:   14px;   /* pillar card (canonical) */
  --ff-radius-2xl:  16px;   /* hero block */
  --ff-radius-3xl:  24px;   /* big hero */
  --ff-radius-full: 9999px; /* pill */

  /* === SHADOWS (navy-tinted, как в pillars) === */
  --ff-shadow-xs:    0 1px 2px rgba(15, 23, 42, 0.04);
  --ff-shadow-sm:    0 4px 8px rgba(15, 23, 42, 0.06);
  --ff-shadow-md:    0 8px 16px rgba(15, 23, 42, 0.08);
  --ff-shadow-lg:    0 12px 24px rgba(15, 23, 42, 0.08);
  --ff-shadow-xl:    0 16px 32px rgba(15, 23, 42, 0.10);
  --ff-shadow-2xl:   0 20px 40px rgba(15, 23, 42, 0.12);
  --ff-shadow-3xl:   0 20px 60px rgba(0, 0, 0, 0.4);         /* lightbox/modal */
  --ff-shadow-accent: 0 8px 24px rgba(255, 215, 0, 0.25);    /* glow для жёлтого CTA */

  /* === TRANSITIONS === */
  --ff-transition-fast:   150ms ease;
  --ff-transition-base:   250ms ease;
  --ff-transition-slow:   400ms ease;
  --ff-transition-slower: 700ms cubic-bezier(0.16, 1, 0.3, 1);
  --ff-ease-out:          cubic-bezier(0.16, 1, 0.3, 1);
  --ff-ease-in-out:       cubic-bezier(0.4, 0, 0.2, 1);

  /* === Z-INDEX === */
  --ff-z-base:     1;
  --ff-z-header:   100;
  --ff-z-dropdown: 200;
  --ff-z-sticky:   300;
  --ff-z-modal:    1000;
  --ff-z-toast:    2000;
  --ff-z-debug:    9999;
}

/* ============================================================================
 * Shared utility components
 * Доступны везде где подключён design-tokens.css.
 * Префикс `.ff-` — не конфликтует с Tilda (.t-) и landing prefix (.sf-/.fa-...)
 * ========================================================================== */

/* Container — стандартный контейнер 1200px */
.ff-container {
  max-width: var(--ff-container-max);
  margin: 0 auto;
  padding-left: var(--ff-container-padding);
  padding-right: var(--ff-container-padding);
}
.ff-container--narrow { max-width: var(--ff-container-narrow); }

/* Section — стандартная секция с вертикальными отступами */
.ff-section {
  padding-top: var(--ff-space-5xl);
  padding-bottom: var(--ff-space-5xl);
}
.ff-section--alt { background: var(--ff-bg-section-alt); }
.ff-section--dark {
  background: var(--ff-bg-dark);
  color: var(--ff-color-text-on-dark);
}

/* === CARD === */
.ff-card {
  background: var(--ff-bg-card);
  border: 1px solid var(--ff-border-default);
  border-radius: var(--ff-radius-xl);
  padding: var(--ff-space-2xl);
  transition: transform var(--ff-transition-fast),
              box-shadow var(--ff-transition-fast),
              border-color var(--ff-transition-fast);
}
.ff-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ff-shadow-lg);
  border-color: var(--ff-color-primary);
}
.ff-card--soft { background: var(--ff-bg-card-soft); }
.ff-card--dark {
  background: linear-gradient(135deg, var(--ff-color-primary) 0%, var(--ff-color-primary-soft) 100%);
  color: var(--ff-color-text-on-dark);
  border-color: var(--ff-color-primary);
}

/* === BUTTONS ===
 * Базовые stylesheets — могут быть переопределены в Tilda/Landing.
 * Используются в новых компонентах overlay. */
.ff-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ff-space-sm);
  padding: 12px 24px;
  font-family: inherit;
  font-size: var(--ff-font-size-md);
  font-weight: var(--ff-font-weight-bold);
  line-height: 1;
  border-radius: var(--ff-radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--ff-transition-fast);
  white-space: nowrap;
}

.ff-btn--primary {
  /* Жёлтый pill, чёрный текст — главный CTA */
  background: var(--ff-color-accent);
  color: var(--ff-color-text-on-accent);
  border-color: var(--ff-color-accent);
}
.ff-btn--primary:hover {
  background: var(--ff-color-accent-deep);
  border-color: var(--ff-color-accent-deep);
  box-shadow: var(--ff-shadow-accent);
  transform: translateY(-1px);
}

.ff-btn--secondary {
  background: var(--ff-color-primary);
  color: var(--ff-color-white);
  border-color: var(--ff-color-primary);
}
.ff-btn--secondary:hover {
  background: var(--ff-color-primary-dark);
  border-color: var(--ff-color-primary-dark);
  box-shadow: var(--ff-shadow-lg);
}

.ff-btn--ghost {
  background: transparent;
  color: var(--ff-color-primary);
  border-color: var(--ff-color-primary);
}
.ff-btn--ghost:hover {
  background: var(--ff-color-primary);
  color: var(--ff-color-white);
}

.ff-btn--sm { padding: 8px 16px; font-size: var(--ff-font-size-sm); }
.ff-btn--lg { padding: 16px 32px; font-size: var(--ff-font-size-lg); }

/* === BADGES (дозированный жёлтый) ===
 * Используются ТОЛЬКО для Hormozi-якорей: «Включено», «Бонус», «Гарантия 50%».
 * НЕ использовать для декора. */
.ff-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ff-space-xs);
  padding: 4px 10px;
  font-size: var(--ff-font-size-xs);
  font-weight: var(--ff-font-weight-bold);
  line-height: 1.4;
  border-radius: var(--ff-radius-full);
  background: var(--ff-color-gray-100);
  color: var(--ff-color-text-secondary);
  border: 1px solid var(--ff-border-default);
}
.ff-badge--accent {
  background: var(--ff-color-accent);
  color: var(--ff-color-text-on-accent);
  border-color: var(--ff-color-accent);
}
.ff-badge--accent-soft {
  background: var(--ff-color-accent-soft);
  color: var(--ff-color-primary);
  border-color: var(--ff-color-accent-warm);
}
.ff-badge--success {
  background: var(--ff-color-success-soft);
  color: var(--ff-color-success);
  border-color: var(--ff-color-success);
}
.ff-badge--danger {
  background: var(--ff-color-danger-soft);
  color: var(--ff-color-danger);
  border-color: var(--ff-color-danger-border);
}

/* === METRIC ACCENT === */
.ff-metric--accent {
  color: var(--ff-color-accent-warm);
  font-weight: var(--ff-font-weight-black);
  letter-spacing: var(--ff-letter-spacing-tight);
}

/* === CTA (главный жёлтый призыв) ===
 * Pill-кнопка с жёлтым фоном, чёрным текстом, gold glow на hover. */
.ff-cta--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ff-space-sm);
  padding: 14px 28px;
  background: var(--ff-color-accent);
  color: var(--ff-color-text-on-accent);
  font-family: inherit;
  font-size: var(--ff-font-size-md);
  font-weight: var(--ff-font-weight-bold);
  border-radius: var(--ff-radius-full);
  border: 2px solid var(--ff-color-accent);
  text-decoration: none;
  transition: all var(--ff-transition-fast);
  white-space: nowrap;
}
.ff-cta--primary:hover {
  background: var(--ff-color-accent-deep);
  border-color: var(--ff-color-accent-deep);
  box-shadow: var(--ff-shadow-accent);
  transform: translateY(-1px);
}

/* === NOTE / CALLOUT === */
.ff-note {
  font-size: var(--ff-font-size-base);
  color: var(--ff-color-text-muted);
  padding: 14px 18px;
  background: var(--ff-bg-card-soft);
  border-left: 3px solid var(--ff-border-strong);
  border-radius: var(--ff-radius-xs);
  max-width: 820px;
}
.ff-note--accent {
  border-left-color: var(--ff-color-accent-warm);
  background: var(--ff-color-accent-soft);
  color: var(--ff-color-primary);
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  .ff-btn, .ff-cta--primary, .ff-card,
  .ff-btn:hover, .ff-cta--primary:hover, .ff-card:hover {
    transform: none !important;
    transition: none !important;
  }
}

/* === BASE BODY FONT ===
 * Иначе текст напрямую в <body> (вне Tilda и компонентов) получает default
 * браузера = "Times New Roman". 11.05.2026 Роман: «дизайн поплыл».
 * Tilda CSS перекроет это для своих .t-* блоков (специфичнее). */
html, body {
  font-family: var(--ff-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Header sticky height + 16px breathing room */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}