:root {
  /* Colors */
  --color-bg:          #0d0d0d;
  --color-surface:     #161616;
  --color-surface-2:   #1f1f1f;
  --color-surface-3:   #282828;
  --color-primary:     #c8b59a;
  --color-primary-dark:#a5917a;
  --color-text:        #f0ece6;
  --color-text-secondary: #9e9590;
  --color-muted:       #5c5550;
  --color-border:      #2a2828;

  /* Typography */
  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-accent:  'Bebas Neue', sans-serif;

  /* Font sizes */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.5rem;
  --text-5xl:  3.5rem;
  --text-6xl:  5rem;
  --text-hero: clamp(5rem, 20vw, 14rem);

  /* Spacing */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  8rem;
  --space-2xl: 12rem;

  /* Layout */
  --container-max: 1200px;
  --nav-height:    72px;
  --radius-sm:     2px;
  --radius-md:     4px;

  /* Motion */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-fast:  200ms;
  --duration-base:  400ms;
  --duration-slow:  800ms;
  --duration-xslow: 1200ms;
}