/* SearchAndSeen design tokens — single source of truth (BUILD-SPEC §4) */
:root {
  --wf-evergreen: #0e4d45;
  --wf-evergreen-700: #0b3d37;
  --wf-evergreen-500: #14675c;
  --wf-evergreen-100: #d8ebe6;
  --wf-evergreen-50: #eef6f3;

  --wf-apricot: #f4a261;
  --wf-apricot-600: #e08b45;

  --wf-mint: #bfe6d6;
  --wf-mint-200: #d9f0e6;

  --wf-ivory: #f8f5ef;
  --wf-white: #ffffff;
  --wf-ink: #14211f;
  --wf-slate: #4b5a57;
  --wf-line: #e3ded4;

  --wf-error: #b42318;
  --wf-success: #14675c;
  --wf-focus: #f4a261;

  /* Fluid spacing — liquid flow across breakpoints */
  --wf-space-1: 4px;
  --wf-space-2: 8px;
  --wf-space-3: clamp(12px, 0.8rem + 0.4vw, 16px);
  --wf-space-4: clamp(18px, 1rem + 0.6vw, 24px);
  --wf-space-5: clamp(24px, 1.2rem + 0.9vw, 32px);
  --wf-space-6: clamp(36px, 1.5rem + 1.8vw, 48px);
  --wf-space-7: clamp(48px, 2rem + 2.5vw, 72px);
  --wf-space-8: clamp(64px, 3rem + 3.5vw, 112px);
  --wf-section-y: clamp(56px, 3.5rem + 4vw, 96px);
  --wf-gutter: clamp(16px, 1rem + 1.5vw, 28px);

  --wf-radius-card: 12px;
  --wf-radius-pill: 999px;
  --wf-radius-logo: 14px;
  --wf-shadow: 0 12px 40px rgba(20, 33, 31, 0.1);
  --wf-shadow-sm: 0 6px 18px rgba(20, 33, 31, 0.06);
  --wf-shadow-hover: 0 22px 50px rgba(14, 77, 69, 0.14);
  --wf-shadow-lift: 0 28px 60px rgba(14, 77, 69, 0.18);
  --wf-shadow-apricot: 0 16px 40px rgba(244, 162, 97, 0.38);

  --wf-container: 1200px;
  --wf-measure: 70ch;

  /* Display = Fraunces (editorial); body/UI = Inter */
  --wf-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --wf-font-body: "Inter", system-ui, sans-serif;

  --wf-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wf-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --wf-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --wf-dur-fast: 160ms;
  --wf-dur: 280ms;
  --wf-dur-slow: 480ms;
}

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}