/* ============================================================
   LUKI — Radii, shadows, transitions
   Pills everywhere for interactive chrome; 4px for form fields;
   24px for cards & modals. Shadows are always black-translucent.
   ============================================================ */
:root {
  /* ---- Radii ---- */
  --mic-radius-pill: 999px;   /* buttons, badges, search, pager, icon btns */
  --mic-radius-card: 24px;    /* cards & modals */
  --mic-radius-lg: 16px;      /* inner panels, mobile cards */
  --mic-radius-md: 12px;      /* KPI tiles, floating menus */
  --mic-radius-sm: 8px;       /* small icon buttons, tracks */
  --mic-radius-input: 4px;    /* text inputs, selects, textareas */

  /* ---- Shadows (black translucent, never coloured) ---- */
  --mic-shadow-card: 0 5px 10px rgba(0, 0, 0, 0.30);
  --mic-shadow-modal: 0 5px 10px rgba(0, 0, 0, 0.90);
  --mic-shadow-menu: 0 10px 30px rgba(0, 0, 0, 0.35);
  --mic-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.35);
  --mic-shadow-flyout: 0 5px 10px rgba(0, 0, 0, 0.60);

  /* Focus ring — teal halo, never native outline */
  --mic-ring-focus: 0 0 0 2px rgba(91, 184, 177, 0.35);

  /* ---- Motion (uncategorized: not color/spacing/radius/shadow/font) ---- */
  --mic-transition-fast: 0.2s ease; /* @kind other */
  --mic-transition-quick: 0.15s ease; /* @kind other */
  --mic-lift: translateY(-1px); /* @kind other */
}