:root {
  /* Colors */
  --color-bg:        #ffffff;
  --color-surface:   #f7f7f7;
  --color-surface-2: #efefef;
  --color-primary:   #111111;
  --color-accent:    #3d3d3d;
  --color-muted:     #9a9a9a;
  --color-border:    #e0e0e0;
  --color-white:     #ffffff;

  /* Typography */
  --font-display: 'DM Serif Display', serif;
  --font-body:    'Noto Sans JP', sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* Scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  3rem;
  --text-4xl:  4.5rem;
  --text-5xl:  6rem;
  --text-6xl:  8rem;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* Layout */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 700ms;
  --duration-xslow: 1100ms;

  /* Borders */
  --radius-sm:   4px;
  --radius-base: 8px;
  --radius-lg:   16px;
  --radius-full: 9999px;
}