/* ============================================================
   Tellus Power — Effects: radii, borders, shadows, motion
   Tellus rounds generously; shadows are quiet — cards rely on
   contrast + radius, not depth.
   ============================================================ */
:root {
  /* ---- Corner radii ---- */
  --radius-sm: 8px;      /* chips inside cards, small controls */
  --radius-md: 14px;     /* image cards, inputs */
  --radius-lg: 20px;     /* large panels, product cards */
  --radius-xl: 28px;     /* full-slide panels */
  --radius-pill: 999px;  /* capsules, buttons, tags */

  /* ---- Border widths ---- */
  --border-hairline: 1px;
  --border-thick: 2px;

  /* ---- Shadows ---- */
  --shadow-card: 0 1px 2px rgba(18, 18, 18, 0.05), 0 8px 24px rgba(18, 18, 18, 0.06);
  --shadow-float: 0 12px 40px rgba(18, 18, 18, 0.16);

  /* Photo overlay for text-on-image (cover slides, photo cards) */
  --overlay-photo: linear-gradient(180deg, rgba(18, 18, 18, 0.30) 0%, rgba(18, 18, 18, 0.62) 100%); /* @kind other */
  --overlay-photo-strong: rgba(18, 24, 20, 0.66);

  /* ---- Motion — understated, fast fades/ease-outs ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --duration-fast: 150ms; /* @kind other */
  --duration-base: 250ms; /* @kind other */
}

/* ---- LEGACY ALIASES (deprecated v1 names) ---- */
:root {
  --radius-xs: 4px;
  --shadow-sm: var(--shadow-card);
  --shadow-md: var(--shadow-card);
  --shadow-lg: var(--shadow-float);
  --glow-lime: 0 0 0 1px rgba(109,204,0,0.4), 0 0 24px rgba(109,204,0,0.25);
  --ease-standard: var(--ease-out); /* @kind other */
  --dur-fast: var(--duration-fast); /* @kind other */
  --dur-normal: var(--duration-base); /* @kind other */
  --dur-slow: 400ms; /* @kind other */
}