/* ============================================================
   Beaupixel — Spacing, radii, shadows & motion
   The brand is built on a bento grid of large, generously
   rounded cards on a light canvas. Radii are big (20–40px).
   Shadows are barely-there; depth comes from contrast and
   layered rounded surfaces, not drop shadows.
   ============================================================ */

:root {
  /* ---- Spacing scale (8pt-ish, used for gaps & padding) ---- */
  --bp-space-2: 2px;
  --bp-space-4: 4px;
  --bp-space-8: 8px;
  --bp-space-10: 10px;   /* default grid gutter between cards */
  --bp-space-12: 12px;
  --bp-space-16: 16px;
  --bp-space-20: 20px;   /* default card inner padding (mobile) */
  --bp-space-24: 24px;
  --bp-space-30: 30px;
  --bp-space-40: 40px;
  --bp-space-60: 60px;
  --bp-space-80: 80px;
  --bp-space-100: 100px;

  /* ---- Corner radii ---- */
  --bp-radius-sm: 10px;    /* buttons, small chips */
  --bp-radius-pill: 999px; /* tags, dots, frosted pills */
  --bp-radius-md: 20px;    /* nested panels, inputs */
  --bp-radius-lg: 30px;    /* standard content card */
  --bp-radius-xl: 40px;    /* hero & feature cards */

  /* ---- Elevation (used very sparingly) ---- */
  --bp-shadow-none: none;
  --bp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --bp-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --bp-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.05);

  /* ---- Frosted glass (the signature button & overlay) ---- */
  --bp-blur: blur(10px); /* @kind other */

  /* ---- Layout rails ---- */
  /* --bp-rail-width: fixed left nav rail on desktop */
  --bp-rail-width: 5.55vw; /* @kind spacing */
  /* --bp-control-height: button / control height */
  --bp-control-height: 44px; /* @kind spacing */

  /* ---- Motion ---- */
  --bp-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --bp-ease-in: ease-in; /* @kind other */
  --bp-ease-std: ease; /* @kind other */
  --bp-dur-fast: 0.3s; /* @kind other */
  --bp-dur-med: 0.5s; /* @kind other */
  --bp-dur-slow: 1s; /* @kind other */
  --bp-hover-opacity: 0.23; /* @kind other */
}