/* ============================================================
   PRICE FAMILY PET SITTING — Colors & Type tokens
   ------------------------------------------------------------
   Warm, earthy, homey. A small family-run dog-sitting service
   in Western Sydney. The palette is sampled directly from the
   brand logo: deep sage-forest green, copper / terracotta, and
   a soft cream paper. "Pet sitting that feels like home."

   Fonts (loaded via <link> in index.html):
     · Display / headings -> Cormorant Garamond (elegant serif)
     · Body / UI          -> Mulish (friendly humanist sans)
   ============================================================ */

:root {
  /* ---------- BRAND CORE (sampled from logo) ---------- */
  --forest:        #3E5640;
  --forest-deep:   #2C3E2E;
  --forest-700:    #34492F;
  --sage:          #889B7E;
  --sage-soft:     #B9C4AC;
  --sage-wash:     #E4E9DC;

  --copper:        #A86A3C;
  --copper-deep:   #6E4A2E;
  --copper-soft:   #C99A6E;
  --copper-wash:   #F0E2D2;

  /* ---------- WARM NEUTRALS (paper) ---------- */
  --cream:         #F9F1E6;
  --ivory:         #FFFDF8;
  --sand:          #F1E7D7;
  --linen:         #EADCC6;
  --linen-deep:    #DCC9AC;

  /* ---------- INK (warm, never pure black) ---------- */
  --ink:           #2E2A24;
  --ink-soft:      #6B6358;
  --ink-faint:     #9A9183;
  --white:         #FFFFFF;

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg:            var(--cream);
  --surface:       var(--ivory);
  --surface-alt:   var(--sand);
  --border:        var(--linen);
  --border-strong: var(--linen-deep);

  /* ---------- SEMANTIC TEXT ---------- */
  --fg1:           var(--ink);
  --fg2:           var(--ink-soft);
  --fg3:           var(--ink-faint);
  --fg-on-forest:  #F4EFE4;
  --fg-on-copper:  #FBF4EA;

  /* ---------- SEMANTIC ACCENTS ---------- */
  --primary:       var(--forest);
  --primary-hover: var(--forest-deep);
  --accent:        var(--copper);
  --accent-hover:  var(--copper-deep);
  --link:          var(--copper-deep);
  --focus-ring:    color-mix(in srgb, var(--forest) 55%, transparent);

  --success:       #5E7B4F;
  --warning:       #C08A2E;
  --danger:        #B5532F;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Cormorant Garamond', 'Hoefler Text', Georgia, serif;
  --font-heading: 'Cormorant Garamond', 'Hoefler Text', Georgia, serif;
  --font-body:    'Mulish', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* ---------- TYPE SCALE ---------- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  3rem;
  --text-4xl:  4rem;
  --text-5xl:  5.25rem;

  /* ---------- WEIGHTS ---------- */
  --w-reg: 400; --w-med: 500; --w-semi: 600; --w-bold: 700; --w-x: 800;

  /* ---------- LINE HEIGHTS ---------- */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.65;
  --lh-loose: 1.8;

  /* ---------- TRACKING ---------- */
  --track-tight: -0.01em;
  --track-normal: 0;
  --track-wide:  0.04em;
  --track-caps:  0.18em;

  /* ---------- RADII ---------- */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 14px;
  --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---------- SHADOWS (warm, soft) ---------- */
  --shadow-xs: 0 1px 2px rgba(64, 48, 30, 0.06);
  --shadow-sm: 0 2px 8px rgba(64, 48, 30, 0.07);
  --shadow-md: 0 10px 28px rgba(64, 48, 30, 0.10);
  --shadow-lg: 0 24px 56px rgba(64, 48, 30, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.5);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 480ms;

  --maxw: 1200px;
}

/* ---------- BASE SEMANTIC TYPOGRAPHY ---------- */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 { font-family: var(--font-display); font-weight: var(--w-semi); font-size: var(--text-4xl); line-height: var(--lh-tight); letter-spacing: var(--track-tight); color: var(--fg1); text-wrap: balance; }
h2, .h2 { font-family: var(--font-display); font-weight: var(--w-semi); font-size: var(--text-2xl); line-height: var(--lh-snug); color: var(--fg1); text-wrap: balance; }
h3, .h3 { font-family: var(--font-display); font-weight: var(--w-semi); font-size: var(--text-xl); line-height: var(--lh-snug); color: var(--fg1); }
h4, .h4 { font-family: var(--font-body); font-weight: var(--w-bold); font-size: var(--text-md); line-height: var(--lh-snug); color: var(--fg1); }

p, .body { color: var(--fg2); }
.lead { font-size: var(--text-md); line-height: var(--lh-loose); color: var(--fg2); }

.eyebrow { font-family: var(--font-body); font-weight: var(--w-bold); font-size: var(--text-sm); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--sage); }
.script { font-family: var(--font-display); font-style: italic; font-weight: var(--w-med); color: var(--copper-deep); }

a, .link { color: var(--link); text-decoration: none; }
a:hover, .link:hover { text-decoration: underline; text-underline-offset: 3px; }

small, .caption { font-size: var(--text-sm); color: var(--fg3); }
code, .mono { font-family: var(--font-mono); font-size: 0.9em; }
::selection { background: var(--sage-soft); color: var(--ink); }