/* M Tapeti — Design tokens
   Lifted from design-system.html. Single source of truth for the palette,
   typography metrics, spacing, and elevation. */

:root {
  /* Brand */
  --orange: #f57308;
  --orange-600: #d96106;
  --orange-100: #fde7d4;

  /* Neutrals */
  --ink: #242424;
  --ink-800: #1a1a1a;
  --ink-700: #2f2f2f;
  --ink-600: #404040;
  --muted: #7a7670;
  --line: #e7e2da;
  --cream: #f7f2ea;
  --cream-2: #fbf7f0;
  --paper: #ffffff;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(36, 36, 36, .06), 0 2px 6px rgba(36, 36, 36, .04);
  --shadow-md: 0 8px 24px rgba(36, 36, 36, .08), 0 2px 6px rgba(36, 36, 36, .04);

  /* Layout */
  --container-w: 1240px;
  --container-pad: 40px;
  --container-pad-md: 28px;
  --container-pad-sm: 20px;

  /* Header */
  --header-h: 80px;

  /* Type scale (desktop) */
  --fs-display: 72px;
  --fs-h1: 48px;
  --fs-h2: 32px;
  --fs-h3: 22px;
  --fs-lead: 20px;
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-eyebrow: 12px;

  /* Z-index scale */
  --z-header: 100;
  --z-mobile-nav: 200;
  --z-lightbox: 300;
}