/* ============================================================
   EFFECTS — radii, borders, shadows, motion
   Sharp, engineered feel: small radii, crisp hairlines,
   low-spread shadows. Accent "glow" reserved for emphasis.
   ============================================================ */
:root {
  /* --- Radii (deliberately tight / mechanical) --- */
  --radius-0:   0;
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  14px;
  --radius-pill: 999px;

  /* --- Border widths --- */
  --bw-hair:   1px;
  --bw-thick:  2px;

  /* --- Shadows (light theme tuned) --- */
  --shadow-xs:  0 1px 2px rgba(10, 13, 17, 0.06);
  --shadow-sm:  0 1px 2px rgba(10, 13, 17, 0.06), 0 2px 6px rgba(10, 13, 17, 0.06);
  --shadow-md:  0 4px 10px rgba(10, 13, 17, 0.08), 0 2px 4px rgba(10, 13, 17, 0.05);
  --shadow-lg:  0 12px 28px rgba(10, 13, 17, 0.12), 0 4px 8px rgba(10, 13, 17, 0.06);
  --shadow-xl:  0 24px 56px rgba(10, 13, 17, 0.18);

  /* --- Signature accent glow (use sparingly: primary CTA, live data) --- */
  --glow-power: 0 0 0 1px var(--power-500), 0 6px 22px -6px color-mix(in oklch, var(--power-500) 55%, transparent);

  /* --- Motion --- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-snap:  cubic-bezier(0.34, 1.4, 0.5, 1);   /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */
}

/* Shadows are heavier / darker in dark theme to read against carbon */
[data-theme="dark"] {
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 14px 32px rgba(0, 0, 0, 0.55);
  --shadow-xl:  0 26px 60px rgba(0, 0, 0, 0.65);
}