/* =========================================================
   Cítara Design System — Tokens (spacing, radii, shadow, motion)
   ========================================================= */

:root {
  /* Spacing — base 4 */
  --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-14: 56px;
  --space-18: 72px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radii */
  --radius-0:    0px;
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* Borders */
  --border-width: 1px;

  /* Elevation (light) */
  --elev-0: none;
  --elev-1: 0 1px 0 rgba(14, 16, 20, 0.04), 0 1px 2px rgba(14, 16, 20, 0.06);
  --elev-2: 0 4px 16px rgba(14, 16, 20, 0.08), 0 12px 40px rgba(14, 16, 20, 0.08);
  --elev-focus: 0 0 0 2px rgba(250, 250, 247, 1), 0 0 0 4px var(--focus-ring);

  /* Inner (for dark theme highlights) */
  --inner-hi: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* Motion */
  --dur-micro: 160ms;
  --dur-moderate: 240ms;
  --dur-expressive: 360ms;
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-enter:    cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);

  /* Layout */
  --container-editorial: 1200px;
  --container-app:       1440px;
  --nav-height:          64px;
  --nav-height-inst:     72px;
  --sidebar-open:        240px;
  --sidebar-closed:      64px;
}

[data-theme="dark"] {
  --elev-1: var(--inner-hi), 0 1px 2px rgba(0, 0, 0, 0.4);
  --elev-2: var(--inner-hi), 0 8px 32px rgba(0, 0, 0, 0.5);
}