/* ============================================================================
   NORED FARMS - design tokens, in the Seed system
   ----------------------------------------------------------------------------
   Chris chose seed.com as the style on 2026-08-12: "i really like this style
   can you basically use the same style from this site as much as possible".

   Every value below was MEASURED off seed.com/ds-01 with getComputedStyle on
   2026-08-12, not eyeballed from a screenshot. That is why the light 350 weight
   and the negative tracking are here: they are the two things that actually
   make the Seed look, and both are invisible in a screenshot.

   THREE LAYERS, per .claude/rules/how-we-design.md. Never put a raw hex in a
   component rule. Change a PRIMITIVE to reskin the whole site, which is exactly
   what Chris means by "i can edit the design and pallet myself".
   ========================================================================== */

:root {
  /* ---- LAYER 1: PRIMITIVES (measured from seed.com) --------------------- */
  --green-900:  #1c3a13;   /* seed green: body text AND primary surface     */
  --green-700:  #2c5220;
  --green-500:  #778971;   /* faded green 60                                */
  --green-300:  #a4b0a1;   /* faded green 40                                */
  --green-100:  #d2d8d0;   /* faded green 20                                */
  --lime-400:   #d3fa99;   /* guidance bright green: THE accent             */
  --lime-100:   #e9f0ca;   /* lemongrass                                    */
  --white-000:  #fcfcf7;   /* snow white: the page                          */
  --white-100:  #f6f7ef;   /* yellowish white                               */
  --white-200:  #eff1e4;   /* foam white                                    */
  --grey-100:   #f9f9f9;
  --grey-200:   #efefef;
  --grey-300:   #e6e6e6;

  /* ---- LAYER 2: SEMANTIC (what it DOES on the page) -------------------- */
  --bg:            var(--white-000);
  --bg-alt:        var(--white-200);
  --bg-invert:     var(--green-900);
  --ink:           var(--green-900);
  --ink-muted:     var(--green-500);
  --ink-invert:    var(--white-000);
  --accent:        var(--lime-400);
  --accent-soft:   var(--lime-100);
  --line:          var(--green-100);
  --line-soft:     var(--grey-200);
  --font-display:  "Instrument Serif", Georgia, serif;
  --font-ui:       "Inter", -apple-system, "Segoe UI", Helvetica, sans-serif;

  /* ---- Shape. Seed uses exactly two radii and NO shadow anywhere. ------- */
  --radius:        16px;   /* cards, inputs, images                         */
  --radius-pill:   32px;   /* buttons, chips, large panels                  */
  --shadow:        none;   /* deliberate. Measured: box-shadow none, always. */

  /* ---- Type scale. The light weight is the whole look. ----------------- */
  --w-light:       350;    /* Seed's h1/h2 weight. Not a typo.              */
  --w-normal:      400;
  --w-medium:      500;
  --track-tight:  -0.02em; /* -0.64px at 32px                               */
  --track-tighter:-0.03em; /* -0.96px at 48px                               */

  --step-hero:  clamp(2.75rem, 6vw, 4.5rem);
  --step-h2:    clamp(2rem, 3.6vw, 3rem);     /* 48px                       */
  --step-h3:    clamp(1.35rem, 2vw, 1.75rem);
  --step-body:  1rem;
  --step-small: 0.8125rem;

  /* ---- Space ----------------------------------------------------------- */
  --gap-xs: 8px;  --gap-s: 16px;  --gap-m: 24px;
  --gap-l:  48px; --gap-xl: 80px; --gap-xxl: 128px;
  --measure: 68ch;
  --shell:   1240px;
}

/* ============================ RESET + BASE ============================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step-body);
  font-weight: var(--w-normal);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--step-hero); letter-spacing: var(--track-tighter); line-height: 1.02; }
h2 { font-size: var(--step-h2);   letter-spacing: var(--track-tighter); line-height: 1.08; }
h3 { font-size: var(--step-h3);   letter-spacing: var(--track-tight);   line-height: 1.2;  }
p  { margin: 0; }

.shell   { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gap-m); }
.section { padding-block: var(--gap-xxl); }
.section--tight { padding-block: var(--gap-xl); }

/* Small caps label. Seed uses this above almost every section. */
.eyebrow {
  font-size: var(--step-small); font-weight: var(--w-medium);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: var(--gap-s);
}
.lede { font-size: 1.125rem; color: var(--ink-muted); max-width: 56ch; line-height: 1.55; }

/* ============================== BUTTONS ================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-xs);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: 14px 30px; font: inherit; font-weight: var(--w-medium);
  text-decoration: none; cursor: pointer;
  position: relative; overflow: hidden;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
/* The inline shine sweep, per seed-design-reference.md's "Button Hover
   Effect": a soft light band sweeps left-to-right on hover. One rule for
   every variant; --ghost gets a darker tint because its background is
   transparent and a light sweep would not read against the page. */
.btn::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-15deg); transition: left .5s ease; pointer-events: none;
}
.btn--ghost::after { background: linear-gradient(115deg, transparent, rgba(0,0,0,.05), transparent); }
.btn:hover::after { left: 130%; }
@media (prefers-reduced-motion: reduce) { .btn::after { display: none; } }
.btn--primary { background: var(--ink); color: var(--ink-invert); }
.btn--primary:hover { background: var(--green-700); }
.btn--accent  { background: var(--accent); color: var(--ink); }
.btn--accent:hover { background: var(--lime-100); }
.btn--ghost   { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--block   { width: 100%; }

/* =============================== CHIPS ================================== */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 8px 16px; font-size: var(--step-small); text-decoration: none;
  background: transparent; color: var(--ink); cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--ink-invert); border-color: var(--ink); }
.chip .n { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .n { color: var(--green-300); }

/* =============================== CARDS ================================== */
.card { border-radius: var(--radius); background: transparent; box-shadow: var(--shadow); }
.card__media { border-radius: var(--radius); overflow: hidden; background: var(--bg-alt); aspect-ratio: 4/3; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.4,0,.2,1); }
/* Hover lift + image zoom, per seed-design-reference.md's "Cards" section.
   The zoom triggers off :hover on the CARD, not the image, so it still fires
   when the pointer is over the caption text below the photo. The lift is on
   the link itself (a.card), never on the "coming soon" tincture card, which
   is an <article>, not a link, and has nothing to lift toward. */
.card:hover .card__media img { transform: scale(1.06); }
a.card { transition: transform .22s cubic-bezier(.4,0,.2,1); }
a.card:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .card__media img, a.card { transition: none; }
}
.tag {
  display: inline-block; border-radius: var(--radius-pill); padding: 5px 12px;
  font-size: 0.75rem; font-weight: var(--w-medium); background: var(--accent-soft); color: var(--green-700);
}
.tag--solid { background: var(--accent); }
.code {
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); font-variant-numeric: tabular-nums;
}

/* =============================== GRID =================================== */
.grid { display: grid; gap: var(--gap-m); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* Panels: the big rounded blocks Seed builds whole sections out of. */
.panel { border-radius: var(--radius-pill); padding: var(--gap-l); background: var(--bg-alt); }
.panel--invert { background: var(--bg-invert); color: var(--ink-invert); }
.panel--invert .eyebrow, .panel--invert .lede { color: var(--green-300); }
.panel--accent { background: var(--accent); }
@media (max-width: 640px) { .panel { padding: var(--gap-m); border-radius: var(--radius); } }

.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }