:root {
  /* color */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e5e5e5;
  --color-gray-300: #d4d4d4;
  --color-gray-400: #a3a3a3;
  --color-gray-500: #737373;
  --color-gray-600: #525252;
  --color-gray-700: #404040;
  --color-gray-800: #262626;
  --color-gray-900: #171717;
  /* Accent system: warm "alchemical gold" + cool counterpoint. */
  --color-accent: #d4af37;
  --color-accent-light: #ffd37a;
  --color-accent-dark: #a67c00;
  --color-accent-cool: #22d3ee;
  --color-fish-ancient: #8b7355;
  --color-fish-christian: #ffd700;
  --color-fish-medieval: #6b46c1;
  --color-fish-renaissance: #ff8c00;
  --color-fish-modern: #00ced1;

  /* legacy aliases */
  --black: var(--color-black);
  --dark: #0b0b0e;
  --white: var(--color-white);
  --gray-100: var(--color-gray-100);
  --gray-200: var(--color-gray-200);
  --gray-300: var(--color-gray-300);
  --gray-400: var(--color-gray-400);
  --gray-500: var(--color-gray-500);
  --gray-600: var(--color-gray-600);
  --gray-700: var(--color-gray-700);
  --gray-800: var(--color-gray-800);
  --gray-900: var(--color-gray-900);
  /* semantic color aliases */
  --surface-primary: #0b0b0e;
  --surface-secondary: #11111a;
  --surface-glass: rgba(255, 255, 255, 0.03);
  --surface-glass-hover: rgba(255, 255, 255, 0.05);
  --text-primary: var(--color-gray-100);
  --text-secondary: var(--color-gray-400);
  --text-tertiary: var(--color-gray-600);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.2);
  --accent: var(--color-accent);
  --accent-light: var(--color-accent-light);
  --accent-dark: var(--color-accent-dark);
  --accent-cool: var(--color-accent-cool);

  /* type */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', ui-serif, 'Iowan Old Style', 'Palatino Linotype', serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  --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: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;
  --text-8xl: 6rem;

  /* spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-20: 10rem;
  --space-24: 12rem;

  /* radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* depth */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);

  /* motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 150ms var(--ease-standard);
  --transition-base: 300ms var(--ease-standard);
  --transition-slow: 500ms var(--ease-standard);
  --transition-slower: 700ms var(--ease-standard);

  --max-width: 1200px;
  --nav-height: 48px;
}