/* ─────────────────────────────────────────────────────────────
   Design tokens — single source of truth for every page.

   Linked from each *.html BEFORE its inline <style>, so a page can
   still override a token locally after this file when it genuinely
   needs to (e.g. Garden uses a softer --radius for its photo canvas).

   Keep values here; don't re-declare them per page.
   ───────────────────────────────────────────────────────────── */
:root {
  --bg:             #f6f9fc;
  --surface:        #ffffff;
  --surface-raised: #f0f4f8;
  --text:           #1a1f36;
  --text-secondary: #3c4257;
  --muted:          #697386;
  --border:         rgba(0,0,0,0.07);
  --border-strong:  rgba(0,0,0,0.14);
  --chip:           rgba(0,0,0,0.05);
  --chip-border:    rgba(0,0,0,0.10);
  --accent:         #2563eb;
  --accent-hover:   #1a56d1;
  --accent-muted:   rgba(37,99,235,0.08);
  --accent-text:    #2563eb;
  --shadow-sm:  0 1px 0 rgba(0,0,0,0.08);
  --shadow-md:  0 2px 0 rgba(0,0,0,0.10), 1px 0 0 rgba(0,0,0,0.04);
  --shadow-lg:  3px 3px 0 rgba(0,0,0,0.10);
  --card:   var(--surface);
  --shadow: var(--shadow-sm);
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius:      6px;   /* default surface rounding */
  --radius-lg:   8px;
  --radius-xl:  20px;   /* tiles, photos */
  --radius-2xl: 28px;   /* case-study figures & hero */
  --radius-pill: 999px;
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --text-xs:   0.72rem;
  --text-sm:   0.82rem;
  --text-base: 0.94rem;
  --text-lg:   1.06rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.56rem;
  --text-3xl:  1.94rem;
  --surface-glass:  rgba(255,255,255,0.80);
  --border-glass:   rgba(255,255,255,0.90);
}