/* ============================================================
   Tenacious J Carriers — Spacing, radius, shadow, motion
   ------------------------------------------------------------
   The signature of this brand is the HARD OFFSET SHADOW: a
   solid black block with NO blur, dropped down-right. It makes
   buttons and images feel stamped, physical, sticker-like.
   ============================================================ */
:root {
  /* ---- Spacing (4px base) ---------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   40px;
  --space-8:   48px;
  --space-9:   64px;
  --space-10:  80px;
  --space-11:  104px;
  --space-12:  120px;

  /* section vertical rhythm */
  --section-y: 82px;

  /* ---- Radius ---------------------------------------------- */
  --radius-sm:    6px;   /* buttons, fields, chips */
  --radius-md:    12px;  /* cards */
  --radius-lg:    16px;  /* large feature cards */
  --radius-img:   30px;  /* framed photos */
  --radius-pill:  999px; /* badges, avatars */

  /* ---- Borders --------------------------------------------- */
  --border-hard:  2px solid var(--tj-black); /* the 2px outline on framed images & avatars */

  /* ---- Shadows --------------------------------------------- */
  /* SIGNATURE — hard, no-blur offset blocks */
  --shadow-hard-sm:  6px 6px 0 0 var(--tj-black);   /* buttons, chips */
  --shadow-hard-md:  12px 12px 0 0 var(--tj-black);
  --shadow-hard-lg:  30px 30px 0 0 var(--tj-black); /* framed hero photos */
  /* hard block in brand green (used on hover / accent moments) */
  --shadow-hard-green: 6px 6px 0 0 var(--tj-green);

  /* inset accents that pair with hard shadows on buttons */
  --inset-ink:    inset 0 0 0 1px var(--tj-black);
  --inset-green:  inset 0 0 0 3px var(--tj-green);

  /* SOFT — used on floating cards / inputs (sparingly) */
  --shadow-soft-sm:  0 2px 1.5px .5px #95a0b229;
  --shadow-soft-md:  0 2px 8px #c4cad43d;
  --shadow-soft-lg:  0 12px 32px #0b0f1a26;

  /* ---- Motion ---------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --dur-fast:   .15s; /* @kind other */
  --dur-base:   .3s;  /* @kind other */

  /* ---- Layout --------------------------------------------- */
  --container:       1280px; /* @kind other */
  --container-tight: 1080px; /* @kind other */
  --gutter:          5vw;     /* @kind other */
}