/* =============================================
   Laplapky Design Tokens — єдине джерело правди
   Міняй тут — змінюється скрізь
   ============================================= */

:root {

  /* ── Base — преміум чорно-білий ─────────── */
  --color-bg:           #FFFFFF;
  --color-soft:         #F5F4F2;
  --color-cream:        #F9F8F6;
  --color-ink:          #111111;
  --color-ink-soft:     #737373;
  --color-line:         #E5E3DF;
  --color-white:        #FFFFFF;

  /* ── Palette ─────────────────────────────── */

  /* Teal — primary accent */
  --color-teal:         #5B8E7D;
  --color-teal-deep:    #4A7567;
  --color-teal-tint:    #EAF3F0;

  /* Orange — warm secondary */
  --color-orange:       #F4A259;
  --color-orange-deep:  #E08C3D;
  --color-orange-tint:  #FEF3E8;

  /* Green — позитивні стани / "знайшов дім" */
  --color-green:        #8CB369;
  --color-green-deep:   #74986F; /* darker version */
  --color-green-tint:   #EEF5E8;

  /* Yellow — попередження / легкі tint */
  --color-yellow:       #F4E285;
  --color-yellow-tint:  #FEFAE8;

  /* Burgundy — терміново / помилки */
  --color-burgundy:     #BC4B51;
  --color-burgundy-tint:#F8ECEC;

  /* ── Aliases — для зворотньої сумісності ── */
  --bg:           var(--color-bg);
  --soft:         var(--color-soft);
  --cream:        var(--color-cream);
  --ink:          var(--color-ink);
  --ink-soft:     var(--color-ink-soft);
  --line:         var(--color-line);

  /* Heart / like button */
  --color-heart:        #E85C74;
  --color-heart-tint:   #FDE8ED;

  /* primary = teal */
  --color-coral:        var(--color-teal);
  --color-coral-deep:   var(--color-teal-deep);
  --color-coral-tint:   var(--color-teal-tint);
  --coral:              var(--color-teal);
  --coral-deep:         var(--color-teal-deep);
  --coral-tint:         var(--color-teal-tint);

  /* secondary = orange */
  --color-gold:         var(--color-orange);
  --color-gold-deep:    var(--color-orange-deep);
  --color-gold-tint:    var(--color-orange-tint);
  --gold:               var(--color-orange);
  --gold-deep:          var(--color-orange-deep);
  --gold-tint:          var(--color-orange-tint);

  /* ── Shadows — нейтральні, без кольорового tint ── */
  --shadow:    0 8px 30px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .04);
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, .06);
  --shadow-md: 0 16px 48px rgba(0, 0, 0, .10);

  /* ── Border radius ───────────────────────── */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius:      16px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* Aliases */
  --r:    var(--radius);
  --r-lg: var(--radius-lg);

  /* ── Spacing scale (4px base) ────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Section / page spacing ─────────────── */
  --section-y:          56px;
  --section-y-sm:       44px;
  --page-top:           48px;
  --page-bottom:        80px;
  --content-gap:        48px;

  /* ── Container ───────────────────────────── */
  --container-max:   1140px;
  --container-pad:   24px;

  /* ── Typography ──────────────────────────── */
  --font-family:  'Onest', system-ui, sans-serif;

  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;

  /* ── Z-index scale ───────────────────────── */
  --z-map:     100;
  --z-nav:    1200;
  --z-modal:  2000;
  --z-toast:  3000;
  --z-spark:  4000;

  /* ── Transitions ─────────────────────────── */
  --ease:      .18s ease;
  --ease-fast: .12s ease;
  --ease-slow: .35s cubic-bezier(.2, .9, .3, 1.3);
}