/* ============================================================
   QUALITUM — EFFECTS: radii, borders, shadows, motion
   Soft rounded cards (14–18px), full-pill CTAs/chips (999px),
   low-spread green-tinted shadows. Calm fades — no bounce on UI.
   ============================================================ */
:root {
  /* ---- Radii ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;    /* inputs, small controls */
  --radius-md: 14px;    /* cards */
  --radius-lg: 18px;    /* large cards, modals */
  --radius-xl: 24px;    /* media frames */
  --radius-pill: 999px; /* CTAs, chips, status pills, avatars */

  /* ---- Borders ---- */
  --border-width: 1px; /* @kind other */
  --border-hairline: 1px solid var(--rule); /* @kind other */
  --border-card: 1px solid var(--rule-strong); /* @kind other */

  /* ---- Shadows (green-tinted, low spread) ---- */
  --shadow-xs: 0 1px 2px rgba(12, 26, 19, 0.05);
  --shadow-sm: 0 2px 8px rgba(12, 26, 19, 0.06);
  --shadow-md: 0 8px 24px -8px rgba(12, 26, 19, 0.12);
  --shadow-lg: 0 20px 50px -16px rgba(12, 26, 19, 0.18);
  --shadow-xl: 0 30px 80px -20px rgba(8, 34, 24, 0.40);
  --shadow-mint: 0 0 0 1px rgba(62, 241, 172, 0.40), 0 0 24px rgba(62, 241, 172, 0.18); /* logo / accent glow */
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* ---- 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 */
  --dur-fast: 0.15s; /* @kind other */
  --dur-base: 0.2s; /* @kind other */
  --dur-slow: 0.4s; /* @kind other */
  --dur-reveal: 0.7s; /* @kind other */

  /* ---- Layering ---- */
  --z-nav: 100; /* @kind other */
  --z-modal: 9999; /* @kind other */
}