/* ===========================================================
   TasteBud — Effects: radii, shadows, motion, textures
   No 3D, no flip — simple, reliable. Soft warm shadows.
   Signature motif: the green checkerboard used as a frame.
   =========================================================== */

:root {
  /* ---- Corner radii ---- */
  --radius-xs:  4px;
  --radius-sm:  8px;    /* buttons, inputs */
  --radius-md:  12px;
  --radius-lg:  16px;   /* cards */
  --radius-xl:  22px;   /* hero / large media */
  --radius-pill:100px;  /* badges, tags */
  --radius-full:9999px;

  /* ---- Shadows (warm, soft, never harsh) ---- */
  --shadow-sm:    0 2px 8px rgba(26,26,26,0.06);
  --shadow-card:  0 14px 30px -12px rgba(0,0,0,0.18);   /* card hover */
  --shadow-pop:   0 24px 60px -24px rgba(26,26,26,0.28); /* modal / dialog */
  --shadow-badge: 0 2px 8px rgba(0,0,0,0.15);
  --shadow-hero:  inset 0 1px 0 rgba(255,255,255,0.12),
                  0 40px 80px -30px rgba(14,100,36,0.30); /* green-cast media */

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.2, 0.9, 0.3, 1);    /* @kind other */
  --ease-bounce: cubic-bezier(0.2, 0.9, 0.3, 1.15);  /* @kind other */
  --dur-fast:    0.2s;   /* @kind other */
  --dur-base:    0.25s;  /* @kind other */
  --dur-slow:    0.45s;  /* @kind other */
  --lift:        translateY(-1px);   /* @kind other */
  --lift-card:   translateY(-3px);   /* @kind other */

  /* ---- Checkerboard motif ---- */
  --checker-size: 28px;
  --checker-color: var(--green);

  /* ---- Paper grain (the warm film over everything) ---- */
  --grain-opacity: 0.18;   /* @kind other */
}

/* The signature green checkerboard — apply .tb-checker to any block. */
.tb-checker {
  --c1: var(--checker-color);
  --size: var(--checker-size);
  background-color: transparent;
  background-image:
    linear-gradient(45deg, var(--c1) 25%, transparent 25%),
    linear-gradient(-45deg, var(--c1) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--c1) 75%),
    linear-gradient(-45deg, transparent 75%, var(--c1) 75%);
  background-size: var(--size) var(--size);
  background-position:
    0 0,
    0 calc(var(--size) / 2),
    calc(var(--size) / 2) calc(var(--size) / -2),
    calc(var(--size) / -2) 0;
}