/* ═══════════════════════════════════════════════════════════
   ESSENCE TOKENS — единый источник констант
   Не зависят от темы. Используй var(--token) везде.
═══════════════════════════════════════════════════════════ */

:root {
  /* ── Spacing ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ── Border radius ── */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-full: 9999px;

  /* ── Layout ── */
  --topbar-h:           56px;
  --sidebar-w:          64px;   /* Всегда icon-only, нет разворачивания */
  --sidebar-w-expanded: 220px;  /* hover-expand или sidebar-full */
  --content-max:        1200px;
  --content-narrow:     760px;
  --content-wide:       1440px;

  /* ── Z-index layers ── */
  --z-canvas:     0;
  --z-content:    1;
  --z-sticky:     10;
  --z-sidebar:    100;
  --z-topbar:     200;
  --z-bottomnav:  300;
  --z-dropdown:   400;
  --z-modal:      1000;
  --z-toast:      3000;
  --z-transition: 9999;

  /* ── Typography scale ── */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  32px;
  --fs-hero: 48px;

  /* ── Font weights ── */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-black:  900;

  /* ── Line heights ── */
  --lh-tight:  1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* ── Transitions ── */
  --t-fast:   .12s ease;
  --t-base:   .18s ease;
  --t-slow:   .3s ease;
  --t-spring: .4s cubic-bezier(.16,1,.3,1);

  /* ── Semantic fixed colors (не зависят от темы) ── */
  --color-discord:  #5865f2;
  --color-telegram: #2aabee;
  --color-green:    #3cc89a;
  --color-gold:     #ffd700;
  --color-pink:     #ff6b9c;
  --color-orange:   #f97316;

  /* ── Breakpoints как custom props (для JS) ── */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
}