/* ============================================================
   BREAKOUT KC - EFFECTS  (2026 refresh)
   Crisp hairline borders + tight neutral shadows replace the
   2019 soft glowy elevation. Slightly larger, calmer radii.
   ============================================================ */
:root {
  /* Radii - a touch larger / softer */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;   /* buttons - still a brand signature */
  --radius-circle: 50%;

  /* Borders - hairline structure is core to the new look */
  --border-width: 1px;
  --border-width-strong: 1.5px;
  --border-hairline: 1px solid var(--line); /* @kind other */
  --border-hairline-dark: 1px solid rgba(255,255,255,0.12); /* @kind other */

  /* Shadows - tight, neutral, ink-based (no colored glow) */
  --shadow-xs: 0 1px 2px rgba(7, 15, 22, 0.06); /* @kind shadow */
  --shadow-sm: 0 2px 6px rgba(7, 15, 22, 0.07); /* @kind shadow */
  --shadow-md: 0 10px 30px -12px rgba(7, 15, 22, 0.20); /* @kind shadow */
  --shadow-lg: 0 28px 64px -24px rgba(7, 15, 22, 0.32); /* @kind shadow */
  --shadow-button: 0 4px 14px -4px rgba(7, 15, 22, 0.28); /* @kind shadow */
  --shadow-photo: 0 24px 60px -24px rgba(7, 15, 22, 0.42); /* @kind shadow */

  /* Photo scrim */
  --scrim-room: linear-gradient(180deg, rgba(7,15,22,0) 30%, rgba(7,15,22,0.86) 100%); /* @kind other */
  --scrim-hero: linear-gradient(180deg, rgba(7,15,22,0.30) 0%, rgba(7,15,22,0.55) 45%, rgba(7,15,22,0.82) 100%); /* @kind other */

  /* Motion - snappier */
  --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: 110ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 380ms; /* @kind other */
}