/* ============================================================
   BTK Design System — Effects: shadows, radii, borders, motion
   The BTK aesthetic is formal/governmental: sharp corners
   (radius 0) almost everywhere, one soft card shadow, restrained
   fades. Buttons are the rare exception (5px radius).
   ============================================================ */

:root {
  /* ---- Radii ---- */
  --btk-radius-none: 0px;        /* default — cards, link-cards, panels */
  --btk-radius-button: 5px;      /* CTA buttons */
  --btk-radius-pill: 9999px;     /* ping circles, avatars */

  /* ---- Shadows ---- */
  --btk-shadow-card: 0 0 4px -2px rgba(0, 0, 0, 0.14), 0 4px 8px -2px rgba(0, 0, 0, 0.1);
  --btk-shadow-header: 0 4px 12px rgba(0, 0, 0, 0.15);     /* sticky header */
  --btk-shadow-text: 0 1px 3px rgba(0, 0, 0, 0.4);          /* nav over banner */
  --btk-shadow-megamenu: 0 0 4px -2px rgba(0, 0, 0, 0.14), 0 4px 8px -2px rgba(0, 0, 0, 0.1);

  /* ---- Borders ---- */
  --btk-border-width: 1px;
  --btk-border-color: var(--btk-border);
  --btk-divider: 1px solid var(--btk-gray-200);

  /* ---- Motion ---- */
  --btk-ease: cubic-bezier(0.4, 0, 0.6, 1); /* @kind other */
  --btk-duration-fast: 0.2s; /* @kind other */
  --btk-duration: 0.3s; /* @kind other */
  --btk-duration-reveal: 0.6s; /* @kind other */

  /* ---- Interaction conventions ---- */
  --btk-hover-opacity: 0.8; /* @kind other */       /* link/icon hover */
  --btk-image-hover-scale: 1.03; /* @kind other */  /* card image zoom on hover */
  --btk-focus-ring: 2px solid color-mix(in srgb, var(--color-primary) 50%, transparent);
}