/* =============================================================
   QualityMax — Effects: radius, shadow, motion, z-index
   Shadows are dark-tuned by default; light theme softens them.
   ============================================================= */

:root {
  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows (dark) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);

  /* Motion */
  --duration-fast: 100ms;   /* @kind other */
  --duration-base: 150ms;   /* @kind other */
  --duration-slow: 300ms;   /* @kind other */
  --duration-slower: 500ms; /* @kind other */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --transition-fast: var(--duration-fast) var(--ease-default); /* @kind other */
  --transition-base: var(--duration-base) var(--ease-default); /* @kind other */
  --transition-slow: var(--duration-slow) var(--ease-default); /* @kind other */

  /* Z-index scale */
  --z-base: 1;       /* @kind other */
  --z-raised: 10;    /* @kind other */
  --z-dropdown: 100; /* @kind other */
  --z-sticky: 200;   /* @kind other */
  --z-header: 300;   /* @kind other */
  --z-sidebar: 400;  /* @kind other */
  --z-overlay: 800;  /* @kind other */
  --z-modal: 900;    /* @kind other */
  --z-toast: 1000;   /* @kind other */
  --z-tooltip: 1100; /* @kind other */
}

[data-theme="light"] {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}