/* Hoophouse Grove — Appily-OneHundredSeven / Sipora Seeds
   Arched polytunnel nursery storefront. Replaces Pearl Sip Market.
   NOT Capillary Mat, Seed Tape, Lathhouse, Plug Cell, Cold Frame,
   Tessera, Chromafan, purple-indigo glow, cream+terracotta serif. */
:root {
  --a107-canopy: #156B45;
  --a107-canopy-deep: #0F5234;
  --a107-spray: #0B5FA8;
  --a107-spray-deep: #084A85;
  --a107-paprika: #B82E1C;
  --a107-paprika-deep: #8F2215;
  --a107-saffron: #FFB800;
  --a107-saffron-ink: #3A2E00;
  --a107-mist: #E8F6EE;
  --a107-warm: #FFF6E4;
  --a107-field: #F3FAF4;
  --a107-surface: #FFFFFF;
  --a107-ink: #14241A;
  --a107-mute: #3A4A3C;
  --a107-soil: #1C2A20;
  --a107-border: #A8C4B0;
  --a107-ok: #156B45;
  --a107-err: #8F2215;
  --a107-on-canopy: #F3FFF8;
  --a107-on-spray: #F4FAFF;
  --a107-on-paprika: #FFF8F6;
  --a107-on-saffron: #14241A;
  --a107-on-soil: #E8F6EE;
  --a107-placeholder: #3A4A3C;

  --a107-primary: var(--a107-canopy);
  --a107-secondary: var(--a107-spray);
  --a107-accent: var(--a107-paprika);
  --a107-background: var(--a107-field);
  --a107-text: var(--a107-ink);
  --a107-border-token: var(--a107-border);

  /* Legacy Pearl Sip aliases → Hoophouse Grove */
  --a107-matcha: var(--a107-canopy);
  --a107-matcha-deep: var(--a107-canopy-deep);
  --a107-thai: var(--a107-paprika);
  --a107-thai-deep: var(--a107-paprika-deep);
  --a107-berry: var(--a107-paprika);
  --a107-berry-deep: var(--a107-paprika-deep);
  --a107-yuzu: var(--a107-saffron);
  --a107-yuzu-ink: var(--a107-saffron-ink);
  --a107-milk: var(--a107-mist);
  --a107-milk-pink: var(--a107-warm);
  --a107-milk-mint: var(--a107-mist);
  --a107-cup: var(--a107-soil);
  --a107-pearl: var(--a107-warm);
  --a107-tapioca: #3A4A3C;
  --a107-on-matcha: var(--a107-on-canopy);
  --a107-on-thai: var(--a107-on-paprika);
  --a107-on-berry: var(--a107-on-paprika);
  --a107-on-yuzu: var(--a107-on-saffron);
  --a107-on-cup: var(--a107-on-soil);

  --a107-font-display: "Epilogue", "Segoe UI", system-ui, sans-serif;
  --a107-font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  --a107-space-1: 8px;
  --a107-space-2: 16px;
  --a107-space-3: 24px;
  --a107-space-4: 32px;
  --a107-space-5: 48px;
  --a107-space-6: 64px;
  --a107-space-7: 96px;

  --a107-radius-sm: 8px;
  --a107-radius-md: 14px;
  --a107-radius-lg: 22px;
  --a107-radius-pill: 999px;

  --a107-shadow-hard: 4px 4px 0 var(--a107-soil);
  --a107-shadow-soft: 0 14px 36px rgba(20, 36, 26, 0.12);

  --a107-type-xs: 0.75rem;
  --a107-type-sm: 0.875rem;
  --a107-type-md: 1rem;
  --a107-type-lg: 1.25rem;
  --a107-type-xl: 1.75rem;
  --a107-type-display: clamp(2.2rem, 5.5vw, 3.8rem);

  --a107-nav-h: 118px;
  --a107-max: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.a107-body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--a107-font-body);
  font-size: var(--a107-type-md);
  line-height: 1.55;
  color: var(--a107-ink);
  background:
    radial-gradient(ellipse 90% 55% at 50% -5%, rgba(30, 144, 255, 0.14), transparent 55%),
    radial-gradient(ellipse 70% 40% at 0% 40%, rgba(21, 107, 69, 0.1), transparent 50%),
    radial-gradient(ellipse 60% 35% at 100% 80%, rgba(255, 184, 0, 0.12), transparent 50%),
    var(--a107-field);
}

.a107-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--a107-saffron);
  color: var(--a107-saffron-ink);
  padding: 0.6rem 1rem;
  z-index: 10000;
  font-weight: 700;
}
.a107-skip:focus { left: 1rem; top: 1rem; }

.a107-wrap {
  width: min(100% - 2rem, var(--a107-max));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}

.a107-body ::placeholder {
  color: var(--a107-placeholder);
  opacity: 1;
}
.a107-body a { color: var(--a107-canopy-deep); }
.a107-body a:hover { color: var(--a107-paprika-deep); }
.a107-body img { max-width: 100%; height: auto; display: block; }
.a107-body button,
.a107-body input,
.a107-body select,
.a107-body textarea { font: inherit; }
.a107-body ::selection {
  background: var(--a107-saffron);
  color: var(--a107-saffron-ink);
}

/* Labels & caption chrome: document flow only — never sticky/fixed */
.a107-body label:not(.visually-hidden):not(.a107-skip):not([class*="skip"]),
.a107-body [class*="-label"],
.a107-body [class*="_label"],
.a107-body [class*="-kicker"],
.a107-body [class*="-flap"],
.a107-body [class*="flap-face"],
.a107-body .hb-meter-label,
.a107-body .hb-console,
.a107-body .bl-console,
.a107-body .eg-kicker,
.a107-body .eg-barrel-form label,
.a107-body .sv-crest-copy,
.a107-body .sv-flap-face,
.a107-body .sv-flap-face b,
.a107-body .np-sachet,
.a107-body .np-cascade-kicker,
.a107-body .np-cascade-pad {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
}

/* Site chrome stays in document flow (not sticky/fixed) */
.a107-body .np-flight,
.a107-body .sv-latch,
.a107-body .ra-rail {
  position: relative !important;
  top: auto !important;
}

@media (max-width: 760px) {
  :root { --a107-nav-h: 84px; }
}