/* ==========================================================================
   Design tokens — Savannah's Mini Dachshunds
   Single source of truth for colour, type, spacing, shape, shadow and motion.
   ========================================================================== */
:root {
  /* Colour ---------------------------------------------------------------- */
  --cream-50: #FFFCF7;
  --cream-100: #FBF6EF;
  --cream-200: #F3E9DC;
  --sand-300: #E6D3BC;
  --caramel-400: #D39A5E;
  --caramel-500: #B8773A;
  --caramel-700: #8C5523;
  --chocolate-800: #4A2E1F;
  --chocolate-900: #2B1D14;
  --blush-200: #F4DCD3;
  --sage-500: #7F9474;
  --sage-700: #56694C;
  --amber-500: #D9A441;
  --amber-700: #8A6414;
  --rose-600: #B5524A;
  --white: #FFFFFF;

  /* Semantic */
  --color-bg: var(--cream-50);
  --color-bg-alt: var(--cream-100);
  --color-surface: var(--white);
  --color-text: var(--chocolate-900);
  --color-text-muted: #6B5446;
  --color-heading: var(--chocolate-800);
  --color-link: var(--caramel-700);
  --color-border: var(--sand-300);
  --color-accent: var(--caramel-500);
  --color-focus: var(--caramel-400);
  --overlay-photo: linear-gradient(180deg, rgba(43, 29, 20, .15) 0%, rgba(43, 29, 20, .7) 100%);

  /* Typography ------------------------------------------------------------ */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-script: "Caveat", "Segoe Script", cursive;

  --fs-hero: clamp(2.5rem, 1.6rem + 4.5vw, 5.25rem);
  --fs-h1: clamp(2.125rem, 1.6rem + 2.6vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.9vw, 2.875rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
  --fs-h4: 1.125rem;
  --fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-xs: .8125rem;
  --fs-eyebrow: .8125rem;
  --fs-script: clamp(1.5rem, 1.3rem + .8vw, 2rem);

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  /* Spacing (8px base) ---------------------------------------------------- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --section-pad: clamp(4rem, 3rem + 5vw, 8rem);
  --gutter: 1rem;

  /* Layout */
  --container: 1240px;
  --container-narrow: 760px;
  --header-h: 64px;

  /* Shape ----------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --radius-arch: 999px 999px var(--radius-lg) var(--radius-lg);

  /* Shadow (warm-tinted) ------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(74, 46, 31, .06), 0 2px 8px rgba(74, 46, 31, .06);
  --shadow-md: 0 8px 24px rgba(74, 46, 31, .10);
  --shadow-lg: 0 20px 50px rgba(74, 46, 31, .16);

  /* Motion ---------------------------------------------------------------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;

  /* Z-index scale */
  --z-header: 50;
  --z-float: 60;
  --z-menu: 80;
  --z-modal: 100;
  --z-toast: 120;
}

@media (min-width: 48em) {
  :root {
    --gutter: 1.5rem;
  }
}

@media (min-width: 64em) {
  :root {
    --header-h: 84px;
  }
}