/* ==========================================================================
   FrontStep Delivery — Design Tokens
   Palette derived directly from the brand logo (navy / olive-sage / cream /
   warm amber). Warm, neighborly, premium "local co-op" direction.
   ========================================================================== */

:root {
  /* ---- Brand palette ---- */
  --navy-900: #0f263b;
  --navy-800: #14304b;
  --navy-700: #1c4368;
  --navy-600: #275a86;
  --navy-500: #3a72a3;

  --sage-700: #586d31;
  --sage-600: #6f8a3d;
  --sage-500: #88a44d;
  --sage-300: #b9c98c;
  --sage-100: #e7eccf;

  --amber-600: #c5741a;
  --amber-500: #e2902f;
  --amber-400: #f0a64a;
  --amber-100: #fbe7c8;

  --slate-teal: #4b6670; /* logo backdrop, used for brand tile */

  /* ---- Neutrals / surfaces ---- */
  --cream-page: #f7f1e2;
  --cream-card: #fdfaf1;
  --cream-deep: #ece1c9;
  --cream-line: #e3d8be;
  --white: #ffffff;

  --ink-900: #14242e;
  --ink-700: #2f4350;
  --ink-500: #5a6b73;
  --ink-300: #8b979d;

  /* ---- Semantic ---- */
  --color-bg: var(--cream-page);
  --color-surface: var(--cream-card);
  --color-text: var(--ink-900);
  --color-muted: var(--ink-500);
  --color-accent: var(--amber-500);
  --color-brand: var(--navy-800);

  /* ---- Typography ---- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs: 0.78rem;
  --text-sm: 0.9rem;
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --text-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  --text-xl: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  --text-2xl: clamp(1.9rem, 1.5rem + 1.8vw, 2.8rem);
  --text-3xl: clamp(2.4rem, 1.7rem + 3.4vw, 4.2rem);
  --text-hero: clamp(2.8rem, 1.6rem + 5.4vw, 5.6rem);

  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-body: 1.65;

  /* ---- Spacing & layout ---- */
  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --container: 1180px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 2.5rem);

  /* ---- Radius ---- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  /* ---- Elevation (warm-tinted shadows) ---- */
  --shadow-sm: 0 1px 2px rgba(20, 36, 46, 0.06), 0 2px 6px rgba(20, 36, 46, 0.05);
  --shadow-md: 0 6px 18px rgba(20, 36, 46, 0.08), 0 2px 6px rgba(20, 36, 46, 0.05);
  --shadow-lg: 0 24px 48px -16px rgba(15, 38, 59, 0.28), 0 8px 20px -10px rgba(15, 38, 59, 0.18);
  --shadow-brand: 0 18px 40px -14px rgba(197, 116, 26, 0.45);

  /* ---- Motion ---- */
  --dur-fast: 160ms;
  --dur-normal: 280ms;
  --dur-slow: 600ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);

  /* ---- Z-index scale ---- */
  --z-base: 1;
  --z-sticky: 50;
  --z-overlay: 80;
  --z-modal: 100;
}