/* ============================================================
   EFFECTS  —  Morflax Design System
   Radii · borders · shadows · blur · motion · z-index
   Morflax surfaces float on soft, diffuse, low-contrast shadows
   with hairline borders. Corners are generously rounded.
   ============================================================ */

:root {
  /* ---- Radii ---------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;    /* buttons, inputs        */
  --radius-lg:   14px;    /* cards                  */
  --radius-xl:   20px;    /* panels                 */
  --radius-2xl:  28px;    /* large surfaces, hero   */
  --radius-3xl:  36px;
  --radius-pill: 999px;   /* nav, chips, toggles    */
  --radius-circle: 50%;

  /* ---- Borders -------------------------------------------- */
  --border-hair:  1px;
  --border-thick: 1.5px;

  /* ---- Shadows (light) ------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(16, 16, 20, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 16, 20, 0.07), 0 1px 2px rgba(16, 16, 20, 0.04);
  --shadow-md: 0 4px 14px rgba(16, 16, 20, 0.08), 0 2px 5px rgba(16, 16, 20, 0.04);
  --shadow-lg: 0 14px 36px rgba(16, 16, 20, 0.11), 0 4px 10px rgba(16, 16, 20, 0.05);
  --shadow-xl: 0 28px 64px rgba(16, 16, 20, 0.16), 0 8px 18px rgba(16, 16, 20, 0.07);
  --shadow-panel: 0 2px 10px rgba(16, 16, 20, 0.06), 0 0 0 1px rgba(16, 16, 20, 0.035);
  --shadow-accent: 0 8px 24px rgba(109, 92, 240, 0.30);
  --shadow-inset:  inset 0 1px 2px rgba(16, 16, 20, 0.06);
  --ring-focus:    0 0 0 3px var(--focus-ring);

  /* ---- Blur ----------------------------------------------- */
  --blur-sm: 8px;  /* @kind other */
  --blur-md: 18px; /* @kind other */
  --blur-lg: 40px; /* @kind other */

  /* ---- Motion --------------------------------------------- */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);     /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);  /* @kind other */
  --dur-instant: 80ms;  /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-base:    200ms; /* @kind other */
  --dur-slow:    300ms; /* @kind other */
  --dur-slower:  500ms; /* @kind other */

  --transition-base: all var(--dur-base) var(--ease-out); /* @kind other */
  --transition-colors: color var(--dur-fast) var(--ease-out),
                       background-color var(--dur-fast) var(--ease-out),
                       border-color var(--dur-fast) var(--ease-out); /* @kind other */

  /* ---- Z-index -------------------------------------------- */
  --z-base:     0;    /* @kind other */
  --z-raised:   10;   /* @kind other */
  --z-sticky:   1100; /* @kind other */
  --z-dropdown: 1200; /* @kind other */
  --z-overlay:  1300; /* @kind other */
  --z-modal:    1400; /* @kind other */
  --z-toast:    1500; /* @kind other */
  --z-tooltip:  1600; /* @kind other */
}

/* Deeper shadows under the dark editor */
[data-theme="dark"] {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55), 0 6px 14px rgba(0, 0, 0, 0.40);
  --shadow-xl: 0 32px 72px rgba(0, 0, 0, 0.62), 0 10px 22px rgba(0, 0, 0, 0.45);
  --shadow-panel: 0 2px 12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-accent: 0 8px 28px rgba(109, 92, 240, 0.45);
}