/* ===========================================================================
   WhatsGood — Radius, Border & Shadow tokens
   The structural signature of the brand: heavy black outlines + HARD offset
   shadows (no blur). Everything is generously rounded.
   ===========================================================================*/

:root {
  /* --- Corner radii ----------------------------------------------------- */
  --radius-xs:   8px;
  --radius-sm:   12px;    /* inner square buttons (library/event tiles)   */
  --radius-md:   16px;    /* small buttons, date chips                    */
  --radius-lg:   22px;    /* cards, search bar                            */
  --radius-xl:   28px;    /* large panels                                 */
  --radius-pill: 999px;   /* pills, chips, tab bar                        */

  /* --- Border widths ---------------------------------------------------- */
  --border-thin:  1.5px;
  --border-base:  2px;    /* default heavy outline                        */
  --border-bold:  3px;    /* emphasis (primary CTA, tab bar)              */

  /* The canonical "black outline" shorthand */
  --line:        var(--border-base) solid var(--ink);
  --line-bold:   var(--border-bold) solid var(--ink);

  /* --- HARD offset shadows (no blur — the neo-brutalist drop) ----------- */
  --shadow-xs:   2px 2px 0 0 var(--ink);
  --shadow-sm:   3px 3px 0 0 var(--ink);
  --shadow-md:   4px 4px 0 0 var(--ink);   /* default card / pill          */
  --shadow-lg:   6px 6px 0 0 var(--ink);   /* hero panels                  */
  --shadow-xl:   8px 8px 0 0 var(--ink);   /* feature / floating sheet     */

  /* Pressed shadow — used WITH a matching translate to "push in" */
  --shadow-press: 1px 1px 0 0 var(--ink);

  /* Soft ambient (rare — used only on map pins for depth on photography) */
  --shadow-pin: 0 3px 6px rgba(0,0,0,0.28);

  /* ======================================================================
     SEMANTIC ALIASES
     ======================================================================*/
  --radius-card:    var(--radius-lg);
  --radius-button:  var(--radius-md);
  --radius-tile:    var(--radius-sm);
  --shadow-card:    var(--shadow-md);
  --shadow-float:   var(--shadow-lg);
}