/* ============================================================
   SCC — Effects: radius, shadow, gradients, motion
   The brand reads friendly + premium: soft rounded corners,
   gentle product-shadow drops, gold sheen on premium accents,
   and the signature thin red "smile" underline.
   ============================================================ */
:root {
  /* ---- Corner radius ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   22px;   /* product cards / hero panels */
  --radius-2xl:  32px;
  --radius-pill: 999px;  /* price capsules, tags, chips */
  --radius-hex:  18px;   /* corner softness echoing the hexagon mark */

  /* ---- Shadows (warm, low-spread — product-photography feel) ---- */
  --shadow-xs:  0 1px 2px rgba(26, 22, 20, 0.06);
  --shadow-sm:  0 2px 6px rgba(26, 22, 20, 0.08);
  --shadow-md:  0 6px 18px rgba(26, 22, 20, 0.10);
  --shadow-lg:  0 14px 36px rgba(26, 22, 20, 0.14);
  --shadow-xl:  0 26px 64px rgba(26, 22, 20, 0.18);
  /* tinted shadows for colored surfaces */
  --shadow-red:  0 12px 28px rgba(239, 65, 64, 0.34);
  --shadow-gold: 0 8px 22px rgba(156, 112, 22, 0.40);
  /* floating product drop (soft, large, beneath cut-out meat) */
  --shadow-product: 0 30px 50px -18px rgba(26, 22, 20, 0.45);

  /* ---- Gradients ---- */
  --grad-red:   linear-gradient(135deg, #F4605F 0%, var(--scc-red) 48%, #D62F2E 100%); /* @kind color */
  --grad-red-radial: radial-gradient(circle at 50% 38%, #F35655 0%, #E23A39 55%, #C32827 100%); /* @kind color */
  --grad-green: linear-gradient(135deg, #3A7044 0%, var(--scc-green) 100%); /* @kind color */
  --grad-gold:  linear-gradient(160deg, #F7E08C 0%, #E2B447 40%, #C9921F 72%, #9C7016 100%); /* @kind color */
  /* guideline "Gradient Light to Dark" reference set */
  --grad-spectrum: linear-gradient(90deg, #D63772, #A3478E, #685390, #3B527B, #2F4858); /* @kind color */

  /* ---- Glass / overlay (used on photo-backed banners) ---- */
  --overlay-dark: linear-gradient(180deg, rgba(26,22,20,0) 0%, rgba(26,22,20,0.72) 100%); /* @kind color */
  --overlay-red:  linear-gradient(180deg, rgba(195,40,39,0) 0%, rgba(178,35,34,0.85) 100%); /* @kind color */

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-bounce:cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */
}