/* Puuseppmeister 2.0 – homepage layer: variables.css */
/* Sprint 4 – canonical design tokens */

:root {
  /* Surfaces */
  --pm-bg: #FAF8F4;
  --pm-surface: #FFFFFF;
  --pm-surface-soft: #F2EEE7;
  --pm-text: #202321;
  --pm-text-muted: #666A66;
  --pm-border: #E5DED3;
  --pm-accent: #B8823A;
  --pm-accent-hover: #9E6D2F;
  --pm-dark: #1a1917;
  --pm-focus: #B8823A;

  /* Spacing scale */
  --pm-space-1: 4px;
  --pm-space-2: 8px;
  --pm-space-3: 12px;
  --pm-space-4: 16px;
  --pm-space-5: 24px;
  --pm-space-6: 32px;
  --pm-space-7: 48px;
  --pm-space-8: 64px;
  --pm-space-9: 80px;
  --pm-space-10: 96px;
  --pm-space-11: 120px;

  /* Sprint 4 layout */
  --pm-content-max: 1360px;
  --pm-page-pad-x: 48px;
  --pm-section-y: 96px;
  --pm-gap: 28px;
  --pm-gap-mobile: 20px;
  --pm-card-pad: 28px;
  --pm-section-pad-y: var(--pm-section-y);

  /* Radii – unified card/image radius */
  --pm-radius-sm: 12px;
  --pm-radius-md: 22px;
  --pm-radius-lg: 22px;
  --pm-radius-xl: 22px;
  --pm-radius-card: 22px;
  --pm-radius-btn: 12px;

  /* Shadows – three levels */
  --pm-shadow-1: 0 4px 20px rgba(32, 35, 33, 0.06);
  --pm-shadow-2: 0 12px 36px rgba(32, 35, 33, 0.1);
  --pm-shadow-3: 0 20px 48px rgba(32, 35, 33, 0.14);
  --pm-shadow-subtle: var(--pm-shadow-1);
  --pm-shadow-header: 0 1px 0 var(--pm-border), 0 8px 24px rgba(32, 35, 33, 0.05);

  /* Motion */
  --pm-dur-fast: 200ms;
  --pm-dur-med: 300ms;
  --pm-dur-slow: 450ms;
  --pm-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Typography */
  --pm-font-eyebrow: 12px;
  --pm-font-h2: clamp(30px, 3.2vw, 48px);
  --pm-font-body: clamp(16px, 1.05vw, 18px);
  --pm-font-small: 14px;

  /* Header (site-*) */
  --site-accent: var(--pm-accent);
  --site-accent-hover: var(--pm-accent-hover);
  --site-accent-active: #8F6128;
  --site-header-bg: rgba(250, 248, 244, 0.94);
  --site-header-shadow: var(--pm-shadow-header);
  --site-nav-color: var(--pm-text);
  --site-nav-hover: var(--pm-accent);
  --site-footer-bg: #1a1917;
  --site-footer-text: #e9e9e9;
  --site-footer-heading: var(--pm-accent);
  --site-footer-border: rgba(255, 255, 255, 0.15);
  --site-header-h: 88px;
  --site-header-h-hero: 88px;
  --site-header-h-scrolled: 72px;
  --site-header-pad-x: clamp(20px, 3vw, 48px);
  --site-header-group-gap: 24px;
  --site-header-action-gap: 16px;
  --site-nav-gap: 28px;
  --pm-header-height: 88px;
  --pm-sticky-cta-height: 64px;
}

@media (max-width: 1024px) {
  :root {
    --pm-page-pad-x: 32px;
    --pm-font-h2: 34px;
    --pm-font-body: 17px;
  }
}

@media (max-width: 767px) {
  :root {
    --pm-page-pad-x: 20px;
    --pm-section-y: 72px;
    --pm-font-h2: 30px;
    --pm-font-body: 16px;
  }
}