/* ============================================================
   Design tokens — New Lifestyle MVP
   Извлечено из Figma (fileKey: v6dxy5Le94qxOedP8s2tad)
   ============================================================ */

:root {
  /* === Colors === */
  --color-primary:        #0044cd;  /* основной синий (Figma) */
  --color-primary-hover:  #003aad;  /* темнее для hover */
  --color-primary-light:  #e6edfb;  /* фон выделенных блоков */

  --color-accent-orange:  #f5863c;  /* из логотипа + бейдж "Живий курс" */
  --color-accent-green:   #28c76f;  /* бейдж "Онлайн курс" */
  --color-accent-teal:    #4ac8c8;  /* бейдж "Курс у записі" */
  --color-accent-yellow:  #f3d73d;  /* дополнительный */

  --color-text:           #1a1a1a;
  --color-text-muted:     #6b7280;
  --color-text-light:     #9ca3af;

  --color-bg:             #ffffff;
  --color-bg-soft:        #f6f8fb;  /* фон страницы между секциями */
  --color-bg-card:        #ffffff;

  --color-border:         #e8eef3;  /* основная граница (из Figma) */
  --color-border-strong:  #cbd5e1;

  --color-success:        #059669;
  --color-error:          #dc2626;

  --color-black:          #000000;
  --color-white:          #ffffff;

  /* === Typography === */
  --font-family-base: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

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

  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-lg:    18px;
  --fs-xl:    20px;
  --fs-2xl:   24px;
  --fs-3xl:   32px;
  --fs-4xl:   40px;
  --fs-5xl:   48px;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* === Spacing (8pt grid) === */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* === Layout === */
  --page-max-width:    1280px;  /* контент (1440 - 80*2) */
  --page-padding-x:    80px;    /* desktop */
  --page-padding-md:   32px;    /* tablet */
  --page-padding-sm:   16px;    /* mobile */

  /* === Radius === */
  --radius-sm:  8px;
  --radius-md:  10px;  /* кнопки (из Figma) */
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 30px;  /* большие блоки (hero, карточки крупные) */
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-xs:   0 1px 2px rgba(0, 68, 205, 0.04);
  --shadow-sm:   0 2px 6px rgba(0, 68, 205, 0.06);
  --shadow-md:   0 4px 16px rgba(0, 68, 205, 0.08);
  --shadow-lg:   0 12px 40px rgba(0, 68, 205, 0.12);

  /* === Transitions === */
  --t-fast: 0.15s ease;
  --t-base: 0.2s ease;
  --t-slow: 0.35s ease;

  /* === Z-index === */
  --z-header: 50;
  --z-overlay: 90;
  --z-modal: 100;

  color-scheme: light;
}