/* ============================================================
   Real Botanicals — Spacing, Radius, Shadow, Layout, Motion
   ============================================================ */

:root {
  /* ============== SPACING (4pt base) ============== */
  --sp-0:    0;
  --sp-1:    4px;
  --sp-2:    8px;
  --sp-3:    12px;
  --sp-4:    16px;
  --sp-5:    20px;
  --sp-6:    24px;
  --sp-8:    32px;
  --sp-10:   40px;
  --sp-12:   48px;
  --sp-16:   64px;
  --sp-20:   80px;
  --sp-24:   96px;
  --sp-32:   128px;

  /* ============== RADIUS ============== */
  /* Real Botanicals is geometric with modest rounding. Pill buttons,
     small radius cards, sharp-edge packaging bands. */
  --radius-0:    0;
  --radius-1:    2px;
  --radius-2:    4px;
  --radius-3:    8px;   /* default card, input */
  --radius-4:    12px;
  --radius-5:    16px;  /* feature card */
  --radius-pill: 999px;

  /* ============== BORDERS ============== */
  --border-thin:   1px solid var(--color-border);
  --border-strong: 2px solid var(--color-fg);
  --border-divider: 1px solid var(--color-border);
  --border-band-red: 4px solid var(--rb-red); /* echoes the packaging band */

  /* ============== SHADOWS ============== */
  /* Subtle — this brand reads as "lab clean, photographed on white".
     Use shadows sparingly, and prefer ground-shadow style under products. */
  --shadow-1: 0 1px 2px rgba(17,17,17,0.06);
  --shadow-2: 0 2px 6px rgba(17,17,17,0.08);
  --shadow-3: 0 8px 24px rgba(17,17,17,0.10);
  --shadow-4: 0 16px 48px rgba(17,17,17,0.14);
  /* product hero — wide soft floor shadow */
  --shadow-product: 0 30px 40px -20px rgba(17,17,17,0.18);
  --shadow-focus:  0 0 0 3px rgba(191,40,36,0.30);

  /* ============== LAYOUT ============== */
  --container-sm:   640px;
  --container-md:   880px;
  --container-lg:   1180px;
  --container-xl:   1440px;
  --gutter:         24px;
  --gutter-lg:      48px;
  --header-h:       72px;

  /* ============== MOTION ============== */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;

  /* ============== Z-INDEX ============== */
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 800;
  --z-modal:   900;
  --z-toast:   1000;
}

/* ============== RESPONSIVE BREAKPOINTS ============== */
/* sm: 640  md: 768  lg: 1024  xl: 1280  2xl: 1440 */

/* ============== HELPERS ============== */
.container { width: 100%; max-width: var(--container-lg); margin-inline: auto; padding-inline: var(--gutter); }
.container-xl { max-width: var(--container-xl); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.stack    > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-8); }

/* The packaging "red band" — a recurring visual element */
.rb-band {
  background: var(--rb-red);
  color: var(--rb-white);
  padding: var(--sp-3) var(--sp-6);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--fw-bold);
}