/* ============================================================
   ECHOES — Design Tokens (v4.01-alpha polish pass)
   Source of truth for type, spacing, radius, focus, shadow.
   No theme-coupled colors here — themes.css owns those.
   ============================================================ */

:root {
  /* ---- Type scale (modular, 1.125 ratio) ---- */
  --font-sans: 'Inter', 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --font-display: 'Cinzel', Georgia, serif;

  --text-2xs: 0.6875rem;   /* 11px — tiny meta */
  --text-xs:  0.78125rem;  /* 12.5px — labels */
  --text-sm:  0.875rem;    /* 14px — body small */
  --text-md:  1rem;        /* 16px — body */
  --text-lg:  1.125rem;    /* 18px — emphasized body */
  --text-xl:  1.3125rem;   /* 21px — section heading */
  --text-2xl: 1.5625rem;   /* 25px — page heading */
  --text-3xl: 1.875rem;    /* 30px — hero */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.65;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;

  /* ---- Spacing (8px grid + 4px half-step) ---- */
  --space-0:  0;
  --space-px: 1px;
  --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;

  /* ---- Radius (sharp by default, rounded only for chips/avatars) ---- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   3px;     /* default for buttons, inputs */
  --radius-md:   4px;     /* cards, modals */
  --radius-lg:   6px;     /* elevated surfaces */
  --radius-pill: 999px;   /* chips, badges */
  --radius-full: 50%;     /* avatars */

  /* ---- Border widths ---- */
  --border-thin: 1px;
  --border-mid:  1.5px;
  --border-thick: 2px;

  /* ---- Focus ring (theme-color aware via accent token) ---- */
  --focus-ring-width: 2px;
  --focus-ring-offset: 1px;
  /* The actual color falls back to accent-a if a theme didn't set --focus-ring-color */
  --focus-ring-color: var(--accent-a-light, #93c5fd);

  /* ---- Shadows (subtle; sharp UI doesn't lean on shadow) ---- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.38);
  --shadow-popover: 0 8px 20px rgba(0, 0, 0, 0.42);

  /* ---- Touch / interactive sizing ---- */
  --tap-target-min: 44px;
  --tap-target-comfy: 48px;
  --control-height-sm: 32px;
  --control-height-md: 36px;
  --control-height-lg: 44px;

  /* ---- Z-index scale (single source of truth) ---- */
  --z-base:    1;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-overlay: 1000;
  --z-modal:   1100;
  --z-toast:   1200;
  --z-tooltip: 1300;

  /* ---- Motion ---- */
  --motion-fast:  120ms;
  --motion-base:  180ms;
  --motion-slow:  280ms;
  --easing-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --easing-in:    cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Layout (existing var names preserved) ---- */
  --sidebar-width: 240px;
  --sidebar-width-tablet: 200px;
  --right-panel-width: 320px;

  /* ---- Safe area insets (iOS notch + home indicator) ---- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}