/* ============================================================
   Theme — Effects
   Modeled on Ignite's theme/timing.ts, extended for the web:
   transitions, border radii, shadows, and overlays.
   ============================================================ */

:root {
  /* ---------- Transitions ---------- */
  --transition-fast: 0.2s ease;
  --transition-smooth: 0.3s ease;

  /* ---------- Border radius ---------- */
  --radius-sm: 0.25rem; /*  4px — inputs, small chips */
  --radius-md: 0.5rem; /*  8px — buttons, cards (standard) */
  --radius-lg: 0.75rem; /* 12px — large cards, embeds */
  --radius-xl: 1rem; /* 16px — feature cards */
  --radius-pill: 2rem; /* pills and tags */
  --radius-round: 50%; /* avatars, dots */

  /* Legacy alias (prefer --radius-md in new code) */
  --border-radius-standard: var(--radius-md);

  /* ---------- Shadows ---------- */
  --shadow-faint: 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-lifted: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-modal: 0 18px 45px rgba(0, 0, 0, 0.25);
  --shadow-accent: 0 2px 8px rgba(26, 81, 148, 0.12);
  --shadow-dropdown: 0 4px 8px rgba(0, 0, 0, 0.4);

  /* ---------- Overlays ---------- */
  --overlay-backdrop: rgba(0, 0, 0, 0.45);
  --overlay-light: rgba(255, 255, 255, 0.1);
}