:root {
  /* Colors — matched to Portfolio Playful design */
  --cream:    #FBF1DE;
  --cream-2:  #FCEAC8;
  --ink:      #2C2016;
  --ink-soft: #6B5842;
  --red:      #FF5A3C;
  --coral:    #FF7A5C;
  --yellow:   #FFC53A;
  --mint:     #2FB783;
  --blue:     #3B7DFF;
  --sky:      #3B7DFF;
  --purple:   #8B5CF6;
  --paper:    #FFFCF5;
  --line:     #E7D6B6;
  --shadow:   rgba(44, 32, 22, 0.14);
  --bg:       #FBF1DE;

  /* Typography */
  --font-display: 'Fredoka', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* Spacing scale */
  --sp-xs:  8px;
  --sp-sm:  16px;
  --sp-md:  24px;
  --sp-lg:  40px;
  --sp-xl:  64px;
  --sp-2xl: 96px;

  /* Borders */
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --radius-pill: 100px;

  /* Shadows (ink offset) */
  --shadow-sm: 4px 4px 0 var(--ink);
  --shadow-md: 6px 6px 0 var(--ink);
  --shadow-lg: 10px 10px 0 var(--ink);
  --shadow-xl: 14px 14px 0 var(--ink);

  /* Transitions */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    180ms;
  --dur-mid:     320ms;
  --dur-slow:    500ms;
}