/* Флюсенко — дизайн-токени. Єдине джерело кольорів, типографіки та ритму. */

:root {
  /* Графіт */
  --fl-graphite-900: #1C1F23;
  --fl-graphite-700: #3A3F46;
  --fl-graphite-500: #5F656D;
  --fl-graphite-300: #A9AEB5;
  --fl-graphite-100: #E6E8EB;

  /* Папір */
  --fl-paper-50: #FAF8F4;
  --fl-paper-0:  #FFFFFF;

  /* Бурштин — акцент */
  --fl-amber-400: #FFC15E;
  --fl-amber-500: #F2A93B;
  --fl-amber-600: #D98A16;
  --fl-amber-100: #FFF1D6;

  /* Мідь — декор */
  --fl-amber-700: #9A6410;  /* текст на паперовому тлі: 4.7:1 */
  --fl-copper-500: #B87333;
  /* Колір тексту на бурштині. Окремий токен, бо --fl-graphite-900 у .fl-dark
     стає світлим, і кнопка отримувала білий напис на жовтому (1.7:1). */
  --fl-ink-on-amber: #1C1F23;

  /* Статуси */
  --fl-pcb-600: #1E7A5A;
  --fl-pcb-100: #DDF3EA;
  --fl-heat-500: #D9483B;
  --fl-heat-100: #FDECEA;
  --fl-info-500: #2F6FED;

  /* Темні смуги */
  --fl-dark-bg:      #15171A;
  --fl-dark-surface: #1F2226;
  --fl-dark-line:    #2A2E33;
  --fl-dark-text:    #ECEDEF;

  /* Типографіка */
  --fl-font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fl-font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fl-font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fl-h1: clamp(2.25rem, 1.35rem + 3.6vw, 4rem);      /* 36 → 64 */
  --fl-h2: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);     /* 28 → 44 */
  --fl-h3: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);  /* 22 → 28 */
  --fl-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --fl-body: clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);

  /* Форма */
  --fl-r-btn: 10px;
  --fl-r-card: 16px;
  --fl-r-panel: 24px;
  --fl-r-pill: 999px;

  /* Простір */
  --fl-container: 1280px;
  --fl-gutter: clamp(1rem, 0.5rem + 2vw, 1.5rem);
  --fl-section: clamp(3.5rem, 2rem + 6vw, 6rem);

  /* Тіні та світло */
  --fl-shadow-card: 0 12px 32px -12px rgba(28, 31, 35, .18);
  --fl-shadow-pop:  0 24px 64px -24px rgba(0, 0, 0, .35);
  --fl-glow-amber:  0 8px 24px -8px rgba(242, 169, 59, .55);

  /* Рух */
  --fl-ease: cubic-bezier(.22, 1, .36, 1);
  --fl-dur: .28s;
}

/* Темна смуга — застосовується до секцій, не до всієї сторінки */
.fl-dark {
  --fl-paper-50: var(--fl-dark-bg);
  --fl-paper-0: var(--fl-dark-surface);
  --fl-graphite-900: var(--fl-dark-text);
  --fl-graphite-700: #C9CDD2;
  --fl-graphite-500: var(--fl-graphite-300);
  --fl-graphite-100: var(--fl-dark-line);
  background: var(--fl-dark-bg);
  color: var(--fl-dark-text);
}

@media (prefers-reduced-motion: reduce) {
  :root { --fl-dur: .01ms; }
}