/* Design tokens — extracted verbatim from JWmeme.dc.html */
:root {
  /* Ink */
  --ink:        #16131A;
  --ink-700:    #3B3640;
  --ink-600:    #4A4450;
  --ink-500:    #6B6570;
  --ink-400:    #A59E93;

  /* Paper */
  --canvas:     #D6D0C4;
  --paper:      #F3EEE4;
  --surface:    #FFFDF8;
  --rule:       #E2DBCF;

  /* Dark surfaces */
  --dark:       #16131A;
  --dark-700:   #3A3540;
  --dark-800:   #2C2832;

  /* Brand */
  --purple:       #9B7BFF;
  --purple-lift:  #A98EFF;
  --purple-deep:  #8E6CF7;
  --link:         #6A4BFF;
  --pink:         #FF5C8A;
  --amber:        #FFB547;
  --blue:         #4FC3FF;
  --green:        #3DDC97;

  /* Template pastels */
  --pastel-sand:   #E8E1D4;
  --pastel-sand-2: #DDD5C6;
  --pastel-rose:   #FBD9E3;
  --pastel-lilac:  #E1DBFF;
  --pastel-sky:    #D6F0FF;
  --pastel-lime:   #F0FFC2;
  --pastel-peach:  #FFE4BF;

  /* Type */
  --font-ui:     'Bricolage Grotesque', system-ui, sans-serif;
  --font-mono:   'DM Mono', ui-monospace, monospace;
  --font-meme:   Anton, Impact, sans-serif;

  /* Hard shadows — the core signature of this design */
  --sh-1: 3px 3px 0 var(--ink);
  --sh-2: 4px 4px 0 var(--ink);
  --sh-3: 5px 5px 0 var(--ink);
  --sh-4: 6px 6px 0 var(--ink);
  --sh-5: 8px 8px 0 var(--ink);
  --sh-6: 10px 10px 0 var(--ink);

  /* Radii */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-2xl:  20px;
  --r-pill: 999px;

  /* Meme text outline (4-way, as in the design) */
  --meme-outline-3: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000;
  --meme-outline-2: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}