/* ============================================================
   Fire Breathing Blowfish — Effects
   Radii lean rounded (matching the bubbly wordmark). Shadows are
   warm & punchy. Signature moves: a chunky navy "sticker" border,
   a fire gradient, and an ocean gradient.
   ============================================================ */

:root {
  /* Corner radii — rounded, friendly, sticker-like */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* Borders — the brand loves a bold outline (sticker/decal feel) */
  --border-hair:    1px;
  --border-bold:    2px;
  --border-chunky:  3px;   /* signature sticker outline */

  /* Shadows — warm, grounded, a little playful */
  --shadow-sm:   0 1px 2px rgba(20, 33, 61, 0.10);
  --shadow-md:   0 4px 14px rgba(20, 33, 61, 0.12);
  --shadow-lg:   0 12px 30px rgba(20, 33, 61, 0.18);
  --shadow-fire: 0 8px 24px rgba(236, 100, 8, 0.30);   /* orange glow */
  --shadow-pop:  4px 4px 0 var(--fbbf-navy);           /* hard sticker drop */

  /* Signature gradients */
  --grad-fire:   linear-gradient(180deg, #FDB913 0%, #FF9E2C 34%, #F7871E 62%, #EC6408 100%);  /* @kind color */
  --grad-fire-radial: radial-gradient(120% 120% at 50% 0%, #FFC64B 0%, #FF9E2C 40%, #EC6408 100%);  /* @kind color */
  --grad-ocean:  linear-gradient(180deg, #2E62A8 0%, #1C2E63 70%, #14213D 100%);  /* @kind color */
  --grad-night:  linear-gradient(180deg, #1E2F52 0%, #14213D 100%);  /* @kind color */

  /* Motion — snappy & bouncy, competitive energy */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);       /* @kind other */
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);   /* @kind other */
  --dur-fast:     120ms;   /* @kind other */
  --dur-base:     200ms;   /* @kind other */
  --dur-slow:     360ms;   /* @kind other */
}