:root {
  /* Palette */
  --paper:       #ffffff;
  --paper-2:     #f5f5f3;
  --paper-3:     #f0f0ee;
  --ink:     #101113;
  --line:      #e6e6e3;
  --muted:     #63656b;
  --cobalt:    #3654ff;
  --cobalt-2:  #1f3acc;
  --copper:    #55585f;
  --mint:      #0c7350;

  /* Typography */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Container */
  --container-max: 1280px;
  --container-pad: 1.5rem;

  /* Radius */
  --radius-sm:  0.5rem;
  --radius-md:  0.75rem;
  --radius-lg:  1rem;
  --radius-xl:  1.25rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Shadows */
  --shadow-panel: 0 20px 60px -20px rgba(16,17,19,0.18);
}

@media (min-width: 768px) {
  :root {
    --container-pad: 2.5rem;
  }
}