/* ==========================================================================
   The House of Dachshund — Design Tokens
   Source of truth: plans/01-DESIGN-SYSTEM.md, plans/02-ANIMATIONS-AND-INTERACTIONS.md
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-var.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-var-italic.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("/assets/fonts/caveat-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Metric-adjusted fallbacks reduce layout shift while web fonts load */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  size-adjust: 106%;
  ascent-override: 92%;
}
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial");
  size-adjust: 103%;
  ascent-override: 102%;
}

:root {
  /* ---------- Core palette ---------- */
  --color-cream: #FBF6EE;
  --color-ivory: #FFFDF9;
  --color-sand: #F1E6D6;
  --color-sand-deep: #E8D8C2;
  --color-chocolate: #3B2418;
  --color-espresso: #24150E;
  --color-cognac: #A8612F;
  --color-cognac-dark: #8A4D22;
  --color-caramel: #D69A5C;
  --color-gold: #C9A24B;           /* decorative only (rules, stars, crest) */
  --color-gold-text: #8A6A24;      /* gold for small text on light bg (4.7:1) */
  --color-sage: #7D8B6A;
  --color-rose: #C98474;
  --color-muted: #6F5A4D;          /* 5.2:1 on sand, 5.9:1 on cream */
  --color-line: #E6D9C7;

  /* ---------- Semantic ---------- */
  --bg: var(--color-cream);
  --surface: var(--color-ivory);
  --surface-alt: var(--color-sand);
  --text: var(--color-chocolate);
  --text-muted: var(--color-muted);
  --text-on-dark: var(--color-cream);
  --text-on-dark-muted: rgba(251, 246, 238, 0.72);
  --accent: var(--color-cognac);
  --accent-hover: var(--color-cognac-dark);
  --accent-text: var(--color-cognac-dark); /* small accent text on light bg (6.2:1) */
  --border: var(--color-line);

  --success: #5E7A4F;
  --warning: #C8913A;
  --danger: #B4493C;
  --info: #5B7A8C;

  /* Puppy status (bg / text) */
  --status-available-bg: #E7ECDF;  --status-available: #4E6340;
  --status-reserved-bg: #F5E1DC;   --status-reserved: #8E4C3F;
  --status-sold-bg: #EFE6DA;       --status-sold: #7A6558;
  --status-soon-bg: #F4EAD2;       --status-soon: #7D6224;

  --scrim: linear-gradient(180deg, rgba(36, 21, 14, 0.15) 0%, rgba(36, 21, 14, 0.35) 45%, rgba(36, 21, 14, 0.8) 100%);
  --scrim-side: linear-gradient(90deg, rgba(36, 21, 14, 0.82) 0%, rgba(36, 21, 14, 0.5) 45%, rgba(36, 21, 14, 0.05) 100%);

  /* ---------- Typography ---------- */
  --font-display: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --font-body: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "Caveat", "Segoe Script", cursive;

  --fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-h4:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-h3:   clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --fs-h2:   clamp(2rem, 1.6rem + 1.8vw, 3.25rem);
  --fs-h1:   clamp(2.5rem, 1.8rem + 3.2vw, 4.75rem);
  --fs-display: clamp(2.75rem, 1.9rem + 5vw, 6.5rem);

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.7;

  /* ---------- Spacing (8px base) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(4rem, 3rem + 5vw, 8rem);

  /* ---------- Layout ---------- */
  --container: 1240px;
  --container-wide: 1440px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --header-h: 64px;
  --announce-h: 0px;

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

  --shadow-sm: 0 1px 2px rgba(59, 36, 24, 0.06), 0 2px 6px rgba(59, 36, 24, 0.05);
  --shadow-md: 0 6px 18px rgba(59, 36, 24, 0.08), 0 2px 6px rgba(59, 36, 24, 0.05);
  --shadow-lg: 0 24px 48px -12px rgba(59, 36, 24, 0.18);
  --shadow-glow: 0 10px 30px -8px rgba(168, 97, 47, 0.45);
  --focus-ring: 0 0 0 3px var(--color-ivory), 0 0 0 6px var(--color-gold);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;
  --dur-xslow: 1200ms;
  --stagger: 90ms;

  /* ---------- Layers ---------- */
  --z-base: 1;
  --z-sticky: 50;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-preloader: 500;
}

@media (min-width: 768px) {
  :root { --header-h: 72px; }
}
@media (min-width: 1024px) {
  :root { --header-h: 88px; }
}