/* ============================================================
   MOCNO — Effects (shadows, borders, motion)
   The brand is FLAT and hard-edged: depth comes from thin
   borders and black/white contrast, not soft drop shadows.
   Shadows are subtle; reserve the "pop" shadow for the single
   primary CTA or a floating product mockup.
   ============================================================ */

:root {
  /* ---- Shadows (used sparingly) ------------------------- */
  --shadow-none:  none;
  --shadow-card:  0 1px 2px rgba(0,0,0,0.04);              /* resting white card on grey */
  --shadow-raised:0 4px 16px rgba(0,0,0,0.08);             /* hovered card / dropdown */
  --shadow-pop:   0 12px 36px rgba(0,0,0,0.16);            /* floating mockup / hero product */
  --shadow-cta:   0 6px 20px rgba(255,8,1,0.30);           /* red CTA glow (on light) */
  --shadow-cta-dark: 0 6px 24px rgba(255,8,1,0.45);        /* CTA on dark */
  --shadow-inset-well: inset 0 0 0 1px var(--line-100);    /* outline a sunken well */

  /* ---- Border presets ----------------------------------- */
  --border-card:   var(--bw-hair) solid var(--border);     /* default card edge */
  --border-frame:  var(--bw-frame) solid var(--border-strong); /* hard black frame */
  --accent-stripe-red:    var(--bw-accent) solid var(--mocno-red);
  --accent-stripe-yellow: var(--bw-accent) solid var(--mocno-yellow);

  /* ---- Motion ------------------------------------------- */
  /* Movement is punchy and quick, never floaty. */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);   /* @kind other */
  --ease-snap:  cubic-bezier(0.34, 1.4, 0.5, 1);   /* @kind other */
  --dur-fast:   120ms;  /* @kind other */
  --dur-base:   200ms;  /* @kind other */
  --dur-slow:   360ms;  /* @kind other */

  /* ---- Focus ------------------------------------------- */
  --focus-shadow: 0 0 0 3px rgba(255,8,1,0.35);

  /* ---- Overlays / scrims (for text over photos) -------- */
  --scrim-dark:  linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%); /* @kind color */
  --scrim-side:  linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 65%); /* @kind color */
}