/* ============================================================================
   Huntington Nursery & Florist — prospect design tokens
   Archetype B — Gallery-first / portfolio-led (redesign, honest before → after)
   Direction: a 78-year (est. 1948) nursery + florist + landscaper — product is
   beauty, so the work leads. Respect existing brand (forest-green wordmark + tree).
   Palette: deep forest green · florist rose · warm cream · terracotta soil
   Type: Fraunces (self-hosted serif display + italic tagline) · system sans body
   Single canonical LIGHT (cream) theme. Fixed-forest bands use theme-independent
   *-on-forest tokens so accents never fail contrast.
   ============================================================================ */

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

:root {
  /* ---- Cream ground + ink ---- */
  --color-cream:    #f6f3ea;   /* page ground */
  --color-cream-2:  #efe9da;   /* alt panel */
  --color-cream-3:  #e7dfcc;   /* deeper recess */
  --color-ink:      #21281f;   /* green-black body text (AA+ on cream) */
  --color-body:     #2b322a;
  --color-muted:    #56604f;   /* muted olive-gray on cream (AA ≈ 6.2:1) */

  /* ---- Brand greens ---- */
  --color-forest:   #1e4630;   /* deep brand green — dark bands, headings */
  --color-forest-2: #275a3c;   /* lifted forest panel */
  --color-leaf:     #3a7350;   /* mid-green accent on cream (AA ≈ 4.8:1) */
  --color-leaf-deep:#2c5a3e;

  /* ---- Florist rose (the floral division accent) ---- */
  --color-bloom:      #ab4462;  /* rose on cream (AA ≈ 5.1:1) */
  --color-bloom-deep: #883650;
  --color-bloom-wash: #f0dbe1;

  /* ---- Terracotta (soil / garden-pot secondary) — darkened so cream text clears AA (≈5.1:1) ---- */
  --color-terra:    #9a5230;
  --color-terra-wash:#f1ddd0;

  /* ---- Rules / borders ---- */
  --color-line:        #d8d0bd;
  --color-line-strong: #b9ad92;

  /* ---- Theme-independent ON-FOREST tokens (fixed dark-green bands) ---- */
  --color-on-forest:        #f6f3ea;
  --color-on-forest-muted:  #bccbbc;  /* muted on forest (≈ 7.5:1 on --color-forest) */
  --color-bloom-on-forest:  #f2b8c9;  /* rose pinned for forest bands — clears AA on both forest (5.8:1) and the lifted forest-2 panels (4.8:1) */
  --color-leaf-on-forest:   #93ce9f;  /* brighter leaf pinned for forest bands (≈ 8.4:1) */
  --color-cream-on-forest:  #f6f3ea;

  /* ---- Fixed dark scrim for image captions (never theme-variable) ---- */
  --scrim-forest:   rgba(16, 30, 21, 0.72);
  --scrim-photo:    rgba(20, 34, 24, 0.42);
  --scrim-fade:     rgba(16, 30, 21, 0.35);

  /* ---- Radii: soft / organic ---- */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  22px;
  --radius-xl:  32px;
  --radius-pill:999px;

  /* ---- Spacing ---- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 2.5rem;  --space-8: 3rem;
  --space-10: 4rem;   --space-12: 5.5rem; --space-16: 7.5rem;

  /* ---- Type ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-eyebrow: 0.78rem;
  --fs-xs:  0.8rem;
  --fs-sm:  0.9rem;
  --fs-base:1rem;
  --fs-md:  1.125rem;
  --fs-lg:  1.375rem;
  --fs-xl:  1.85rem;
  --fs-2xl: 2.4rem;
  --fs-3xl: clamp(2.4rem, 5vw, 3.6rem);
  --fs-hero:clamp(2.8rem, 7vw, 5.5rem);

  --lh-tight: 1.05;
  --lh-snug:  1.16;
  --lh-body:  1.66;

  --tracking-eyebrow: 0.24em;
  --tracking-tight: -0.015em;

  --max-content: 1200px;
  --max-narrow:  880px;
  --gutter: clamp(1.1rem, 4vw, 2.75rem);

  --border-hair:   1px solid var(--color-line);
  --border-strong: 1px solid var(--color-line-strong);
  --border-on-forest: 1px solid rgba(246, 243, 234, 0.22);
  --color-line-on-forest: rgba(246, 243, 234, 0.22);
  --color-line-on-forest-strong: rgba(246, 243, 234, 0.40);

  --shadow-soft: 0 14px 40px -22px rgba(16, 30, 21, 0.5);
  --shadow-card: 0 4px 18px -12px rgba(16, 30, 21, 0.4);

  --dur-fast: 150ms; --dur-mid: 340ms; --dur-slow: 800ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-grow: cubic-bezier(0.34, 1.2, 0.64, 1);
}