/* ═══════════════════════════════════════════════════════════════════
   Greenside — marketing site stylesheet.
   Token values mirror the app's src/index.css §4 verbatim (clubhouse light /
   fairway dark). Ported from the Claude Design "_ds" bundle for the apex site.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fonts (self-hosted variable woff2, same families the app ships) ── */
@font-face {
  font-family: "Fraunces Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/fraunces.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/hanken.woff2") format("woff2");
}

/* ── Clubhouse (light) — the default theme ── */
:root,
[data-theme="clubhouse"] {
  --canvas: #f4eee0;
  --surface: #fcf8ef;
  --sidebar: #ece5d4;
  --text: #2b2620;
  --muted: #8c8170;
  --accent: #1b4a37;
  --solid: #1b4a37;
  --on-solid: #f4eee0;
  --tan: #b49a6e;
  --brown: #6e5836;
  --hairline: rgba(43, 38, 32, 0.1);
  --field-border: rgba(43, 38, 32, 0.18);
  --ring: rgba(27, 74, 55, 0.35);

  --danger: #a04545;
  --danger-bg: color-mix(in srgb, #a04545 12%, var(--surface));
  --danger-border: color-mix(in srgb, #a04545 32%, var(--surface));
  --caution: #9b7414;
  --caution-bg: color-mix(in srgb, #9b7414 12%, var(--surface));

  --on-solid-faint: color-mix(in srgb, var(--on-solid) 20%, transparent);

  --tag-fertilizer-bg: #e4ebdf;   --tag-fertilizer-fg: #33543f;
  --tag-preemergent-bg: #eee6d6;  --tag-preemergent-fg: #6e5836;
  --tag-herbicide-bg: #ece0d6;    --tag-herbicide-fg: #7a5638;
  --tag-pgr-bg: #e3e8df;          --tag-pgr-fg: #4a5a3f;
  --tag-insecticide-bg: #eadfd8;  --tag-insecticide-fg: #7a4f3d;
  --tag-other-bg: #e8e3d6;        --tag-other-fg: #6e5836;

  --radius-tile: 20px;
  --radius-card: 16px;
  --radius-control: 12px;
  --shadow-card: 0 1px 2px rgba(43, 38, 32, 0.04), 0 8px 24px rgba(43, 38, 32, 0.05);
  --shadow-pop: 0 12px 40px rgba(43, 38, 32, 0.12);

  --font-display: "Fraunces Variable", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans: "Hanken Grotesk Variable", ui-sans-serif, system-ui, -apple-system, sans-serif;

  color-scheme: light;
}

/* ── Fairway (dark) — flips by swapping data-theme ── */
[data-theme="fairway"] {
  --canvas: #0f2c21;
  --surface: #173b2c;
  --sidebar: #0b231a;
  --text: #f1eadb;
  --muted: #90a598;
  --accent: #86c9a6;
  --solid: #1b4a37;
  --on-solid: #f4eee0;
  --tan: #c2a878;
  --brown: #c2a878;
  --hairline: rgba(244, 238, 224, 0.1);
  --field-border: rgba(244, 238, 224, 0.24);
  --ring: rgba(134, 201, 166, 0.4);

  --danger: #ef9a9a;
  --danger-bg: color-mix(in srgb, #ef9a9a 15%, var(--surface));
  --danger-border: color-mix(in srgb, #ef9a9a 34%, var(--surface));
  --caution: #e3b341;
  --caution-bg: color-mix(in srgb, #e3b341 15%, var(--surface));

  --tag-fertilizer-bg: rgba(134, 201, 166, 0.16);  --tag-fertilizer-fg: #aedcc3;
  --tag-preemergent-bg: rgba(194, 168, 120, 0.18); --tag-preemergent-fg: #d8c39b;
  --tag-herbicide-bg: rgba(180, 130, 95, 0.2);     --tag-herbicide-fg: #d6ad92;
  --tag-pgr-bg: rgba(150, 180, 140, 0.18);         --tag-pgr-fg: #b8ccab;
  --tag-insecticide-bg: rgba(190, 130, 110, 0.2);  --tag-insecticide-fg: #d8aa97;
  --tag-other-bg: rgba(244, 238, 224, 0.12);       --tag-other-fg: #c2a878;

  color-scheme: dark;
}

/* ── Base ── */
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--canvas);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent); opacity: 0.82; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.font-display { font-family: var(--font-display); }
.tabular { font-variant-numeric: tabular-nums; }

/* ── Component classes (mirror the app's @layer components) ── */
.card {
  background-color: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.hairline-b { border-bottom: 1px solid var(--hairline); }
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brown);
}
.accent-ring { box-shadow: inset 0 0 0 1.5px var(--accent); }

/* ── Theme-toggle icon visibility (replaces Claude Design sc-if) ── */
.gs-ico-dark { display: none; }
.gs-ico-light { display: inline-flex; }
[data-theme="fairway"] .gs-ico-dark { display: inline-flex; }
[data-theme="fairway"] .gs-ico-light { display: none; }

/* ── Pricing billing segmented control ── */
.gs-seg {
  border-radius: 999px;
  padding: 9px 22px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: var(--font-sans);
  background: transparent;
  color: var(--muted);
  transition: all .15s ease;
}
.gs-seg-on { background: var(--solid); color: var(--on-solid); }

/* ── Install-page platform segmented control ── */
.gs-plat {
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: var(--font-sans);
  background: transparent;
  color: var(--muted);
  transition: all .15s ease;
}
.gs-plat-on { background: var(--solid); color: var(--on-solid); }

/* ── Footer grid: brand | Product | Company, balanced across the width ── */
.gs-footer-grid { grid-template-columns: minmax(220px, 1.7fr) 1fr 1fr; }
@media (max-width: 760px) {
  .gs-footer-grid { grid-template-columns: 1fr 1fr; }
  .gs-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .gs-footer-grid { grid-template-columns: 1fr; }
}

@keyframes gs-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes gs-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
}