/* ═══════════════════════════════════════════════════════════════
   CONTAB — Spacing / Radii / Elevation / Motion
   Радиусы щедрые («айосные»): сайдбар 24, модалка 20, метрики 18,
   subnav 16, карточки 14–16, контролы 10, пилюли full.
   Тени мягкие диффузные, без жёстких ring.
   Motion: cubic-bezier(.2,.8,.2,1), 120–240ms, без bounce.
   Внизу — легаси-алиасы CONTAB (--r, --sh, --ring …).
   ═══════════════════════════════════════════════════════════════ */

:root {
  --space-0: 0; --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;

  /* layout */
  --sidebar-w: 244px;             /* трек = стеклянная карточка 220 + поля 2×12 */
  --sidebar-w-collapsed: 84px;    /* 60 rail + поля */
  --topbar-h: 60px;
  --page-gutter: 28px;
  --page-max: 1320px;
  --card-pad: 18px;
  --card-pad-lg: 20px;
  --grid-gap: 12px;
  --grid-gap-sm: 8px;

  /* RADII */
  --radius-xs: 6px;  --radius-sm: 8px;  --radius-md: 10px;
  --radius-lg: 12px; --radius-xl: 14px;
  --radius-2xl: 20px; --radius-3xl: 28px; --radius-full: 9999px;

  /* ТЕНИ */
  --shadow-card:  0 1px 2px rgba(24,24,27,0.05);
  --shadow-pop:   0 4px 12px -2px rgba(24,24,27,0.10), 0 16px 40px -8px rgba(24,24,27,0.18);
  --shadow-hover: 0 10px 32px -10px rgba(24,24,27,0.20);
  --shadow-inset-focus: 0 0 0 3px var(--accent-soft);

  /* MOTION */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-std: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: .12s; --dur-base: .16s; --dur-slow: .24s;

  /* ── ЛЕГАСИ-АЛИАСЫ CONTAB ── */
  --r-xs:    var(--radius-xs);
  --r:       var(--radius-md);       /* контролы: 8 → 10px */
  --r-lg:    var(--radius-lg);
  --r-xl:    var(--radius-xl);
  --r-full:  var(--radius-full);
  --r-card:  16px;

  --sh-sm:    var(--shadow-card);
  --sh:       0 1px 3px rgba(24,24,27,.06), 0 4px 16px rgba(24,24,27,.04);
  --sh-hover: var(--shadow-hover);
  --sh-pop:   var(--shadow-pop);
  --ring:     0 0 0 3px var(--accent-soft);

  --ease: cubic-bezier(.2, .8, .2, 1);
}

:is([data-theme="dark"]) {
  --shadow-card:  0 1px 2px rgba(0,0,0,0.5), 0 8px 24px -10px rgba(0,0,0,0.6);
  --shadow-pop:   0 12px 36px -6px rgba(0,0,0,0.7);
  --shadow-hover: 0 12px 34px -10px rgba(0,0,0,0.75);
  --sh:           0 2px 8px rgba(0,0,0,.4), 0 8px 32px rgba(0,0,0,.25);
}