/* ============================================================
   Alias — Radius, elevation, motion tokens
   ============================================================ */

:root {
  /* ---- Corner radius ---- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;   /* default control */
  --radius-lg:   12px;  /* cards */
  --radius-xl:   16px;
  --radius-2xl:  22px;  /* large panels */
  --radius-3xl:  28px;  /* hero + full-bleed media cards */
  --radius-full: 999px;

  /* ---- Elevation (tuned for dark surfaces) ---- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.40), 0 2px 4px rgba(0,0,0,0.28);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.48), 0 4px 10px rgba(0,0,0,0.30);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.55), 0 8px 20px rgba(0,0,0,0.35);

  /* subtle top inner highlight used on raised surfaces */
  --shadow-highlight-top: inset 0 1px 0 rgba(255,255,255,0.05);

  /* accent glow for focus/active hero moments */
  --glow-accent: 0 0 0 1px var(--accent-border), 0 6px 24px rgba(31,224,190,0.22);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   180ms; /* @kind other */
  --dur-slow:   280ms; /* @kind other */
  --dur-theme:  350ms; /* @kind other — dark/light crossfade */

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 3px var(--accent-ring);
}

[data-theme="light"] {
  --shadow-xs: 0 1px 2px rgba(8,15,20,0.06);
  --shadow-sm: 0 1px 3px rgba(8,15,20,0.08), 0 1px 2px rgba(8,15,20,0.04);
  --shadow-md: 0 6px 16px rgba(8,15,20,0.09), 0 2px 4px rgba(8,15,20,0.05);
  --shadow-lg: 0 14px 34px rgba(8,15,20,0.12), 0 4px 10px rgba(8,15,20,0.06);
  --shadow-xl: 0 26px 64px rgba(8,15,20,0.16), 0 8px 20px rgba(8,15,20,0.08);
  --shadow-highlight-top: inset 0 1px 0 rgba(255,255,255,0.6);
  --glow-accent: 0 0 0 1px var(--accent-border), 0 6px 24px rgba(10,168,140,0.18);
}