/* ==========================================================================
   Design tokens — the single source of truth for color, type, spacing.
   Every other stylesheet reads from these custom properties.
   ========================================================================== */

:root {
  /* Color */
  --color-bg: #ffffff;
  --color-ink: #181818;
  --color-ink-soft: #5c5c5c;
  --color-border: #e2e0dc;
  --color-border-strong: #cfccc6;
  --color-tint: #f7f6f4;
  --color-footer-bg: #f3f2ef;

  /* Type */
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Spacing scale */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.25rem;
  --space-xl: 5rem;
  --space-2xl: 7.5rem;

  /* Layout */
  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --header-height: 108px;

  /* Motion — fades only, nothing else */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 200ms var(--ease);
  --transition-slow: 350ms var(--ease);

  /* Elevation — hairlines instead of shadows */
  --border-hairline: 1px solid var(--color-border);
}