:root {
  /* Palette */
  --color-charcoal: #2C2A29;
  --color-cream: #F4F1E8;
  --color-indigo: #2B3F58;
  --color-indigo-light: #D8DFE8;
  --color-amber: #E1B778;

  /* Semantic */
  --color-bg: var(--color-cream);
  --color-text: var(--color-charcoal);
  --color-heading: var(--color-indigo);
  --color-accent: var(--color-amber);
  --color-link: var(--color-indigo);
  --color-link-hover: var(--color-charcoal);
  --color-border: rgba(43, 63, 88, 0.12);
  --color-surface: #FFFFFF;

  /* Typography */
  --font-sans: 'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-jp: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Spacing (8px base grid) */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 1.5rem;    /* 24px */
  --space-lg: 2rem;      /* 32px */
  --space-xl: 3rem;      /* 48px */
  --space-2xl: 4rem;     /* 64px */
  --space-3xl: 6rem;     /* 96px */
  --space-4xl: 8rem;     /* 128px */

  /* Layout */
  --max-width: 1200px;
  --max-width-narrow: 800px;
  --max-width-wide: 1400px;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition-base: 300ms var(--ease-out);
  --transition-slow: 500ms var(--ease-out);
}