/* ============================================
   Design tokens — Business Compass
   Палитра извлечена из logo.jpeg (синий круг,
   чёрный наконечник, белая бумага).
   ============================================ */

:root {
  /* ---------- Color: ink (dark) ---------- */
  --ink: #0E1116;
  --ink-soft: #1B1F26;
  --ink-line: #2A2F38;
  --ink-muted: #6A7280;
  --ink-faint: #B7BDC6;

  /* ---------- Color: paper (light) ---------- */
  --paper: #FFFFFF;
  --paper-soft: #F4F5F7;
  --paper-line: #E4E7EC;

  /* ---------- Color: accent (blue) ---------- */
  --accent: #3B7BB5;
  --accent-deep: #1E4A7A;
  --accent-bright: #4A8FCE;
  --accent-tint: #E8F0F8;

  /* ---------- Color: state ---------- */
  --success: #1F8A4C;
  --danger: #C8392E;

  /* ---------- Type ---------- */
  --font-display: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type scale (fluid) */
  --fs-overline: 0.75rem;     /* 12 — eyebrow, labels */
  --fs-small: 0.875rem;       /* 14 */
  --fs-body: 1rem;            /* 16 */
  --fs-lead: 1.125rem;        /* 18 */
  --fs-h6: 1.125rem;
  --fs-h5: 1.375rem;
  --fs-h4: 1.625rem;          /* 26 */
  --fs-h3: 2rem;              /* 32 */
  --fs-h2: clamp(2.25rem, 3.6vw, 3.5rem);
  --fs-h1: clamp(2.75rem, 5.4vw, 5rem);
  --fs-mega: clamp(3.5rem, 8vw, 7.5rem);

  /* Line heights */
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.55;
  --lh-loose: 1.7;

  /* Letter spacing */
  --ls-tight: -0.02em;
  --ls-snug: -0.012em;
  --ls-normal: 0;
  --ls-wide: 0.08em;
  --ls-mono: 0.02em;

  /* ---------- Spacing scale ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;
  --s-13: 128px;
  --s-14: 160px;

  /* ---------- Radii ---------- */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 20px;
  --r-6: 24px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(14, 17, 22, 0.06), 0 1px 1px rgba(14, 17, 22, 0.04);
  --shadow-md: 0 4px 12px rgba(14, 17, 22, 0.08), 0 2px 4px rgba(14, 17, 22, 0.04);
  --shadow-lg: 0 16px 40px rgba(14, 17, 22, 0.12), 0 4px 8px rgba(14, 17, 22, 0.04);
  --shadow-card: 0 0 0 1px var(--paper-line), 0 1px 2px rgba(14, 17, 22, 0.04);
  --shadow-card-dark: 0 0 0 1px var(--ink-line), 0 1px 2px rgba(0, 0, 0, 0.2);

  /* ---------- Container ---------- */
  --container-max: 1240px;
  --container-pad: clamp(20px, 4vw, 48px);
  --section-pad-y: clamp(64px, 7vw, 96px);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t-base: 240ms;
  --t-slow: 420ms;

  /* ---------- Layout ---------- */
  --header-h: 72px;
  --z-header: 50;
  --z-modal: 60;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
  }
}