/* Med-Compas Design Tokens
   Source of truth: design-system/MASTER.md → "Med-Compas overrides".
   Никаких hardcoded значений в других CSS — только var(--token-name).
   Шрифты подключаются через preconnect+preload в layout (public.ejs),
   plus stylesheet link — НЕ через @import, чтобы не блокировать render-tree.
*/

:root {
  /* ─── Palette — медицинская blue + accent (revert Phase 10 → pre-warm) ─── */
  --color-primary:        #1E5F8F;   /* deep trust blue — медицинский профессионализм */
  --color-primary-hover:  #1A4F76;
  --color-primary-soft:   #E8F2FB;   /* light blue фон секций */
  --color-primary-dark:   #0C2D49;   /* текст на blue-фоне (для совместимости с Phase 10 ссылками) */

  --color-accent:         #F5B25B;   /* тёплый orange — оригинальный под логотип */
  --color-accent-hover:   #E09F43;
  --color-accent-soft:    #FFF4E0;   /* очень мягкий beige для warm blocks (не peach) */
  --color-accent-dark:    #5C3A0E;

  --color-success:        #1E8E3E;
  --color-warning:        #F9AB00;
  --color-danger:         #D93025;

  --color-text:           #0F172A;
  --color-text-muted:     #475569;   /* slate-600 — медицинский нейтральный */
  --color-bg:             #FFFFFF;
  --color-bg-section:     #F8FAFC;   /* slate-50 — холодная зебра, медицинская */
  --color-bg-cool:        #EFF6FB;   /* очень светлый blue для cool-секций */
  --color-border:         #E2E8F0;   /* slate-200 — холодный border */

  /* radius alias (lg/xl уже есть; добавим 2xl для hero-visual) */
  --radius-2xl:  24px;

  /* ─── Font families (3) ─────────────────────────────── */
  --font-heading: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-article: 'PT Serif', Georgia, serif;

  /* ─── Type scale (9) — modular 1.250 ───────────────── */
  --fs-xs:    0.75rem;     /* 12px */
  --fs-sm:    0.875rem;    /* 14px */
  --fs-base:  1rem;        /* 16px — minimum body */
  --fs-lg:    1.125rem;    /* 18px */
  --fs-xl:    1.25rem;     /* 20px */
  --fs-2xl:   1.5rem;      /* 24px — H3 */
  --fs-3xl:   1.875rem;    /* 30px — H2 */
  --fs-4xl:   2.25rem;     /* 36px — H1 mobile */
  --fs-5xl:   3rem;        /* 48px — H1 desktop */

  --lh-tight: 1.2;
  --lh-base:  1.6;

  /* ─── Spacing scale (7) ─────────────────────────────── */
  --space-xs:  0.25rem;    /* 4px */
  --space-sm:  0.5rem;     /* 8px */
  --space-md:  1rem;       /* 16px */
  --space-lg:  1.5rem;     /* 24px */
  --space-xl:  2rem;       /* 32px */
  --space-2xl: 3rem;       /* 48px */
  --space-3xl: 4rem;       /* 64px */

  /* ─── Radius scale (6) ──────────────────────────────── */
  --radius-xs:   2px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ─── Shadow tokens (4) ─────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  /* ─── Z-index (7) ───────────────────────────────────── */
  --z-base:        1;
  --z-dropdown:    50;
  --z-sticky-bar:  90;
  --z-header:      100;
  --z-overlay:     900;
  --z-modal:       1000;
  --z-toast:       1100;

  /* ─── Animation: 3 duration + 2 easing ──────────────── */
  --dur-fast:  150ms;
  --dur-base:  200ms;
  --dur-slow:  300ms;
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Breakpoints (5) — для JS/media-queries reference ─ */
  --bp-sm:   640px;
  --bp-md:   768px;
  --bp-lg:   1024px;
  --bp-xl:   1280px;
  --bp-2xl:  1536px;

  /* ─── Max-widths (4) ────────────────────────────────── */
  --mw-prose:    720px;     /* читаемая ширина long-form (blog-article) */
  --mw-content:  1024px;    /* основной контент */
  --mw-wide:     1200px;    /* hero, footer-cols */
  --mw-full:     1440px;    /* предельная ширина без растяжки */

  /* ─── Icon sizes (4) ────────────────────────────────── */
  --icon-xs:  14px;
  --icon-sm:  18px;
  --icon-md:  24px;
  --icon-lg:  32px;
}

/* prefers-reduced-motion — глобальное подавление анимаций */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  dialog { transition: none !important; }
  dialog::backdrop {
    animation: none !important;
    transition: none !important;
    backdrop-filter: none !important;
  }
}