/* ============================================================
   Farm Direct Stock Feeds — Design Tokens
   Source of truth: tailwind.config.ts + app/layout.tsx
   --------------------------------------------------------------
   Palette is pulled directly from the logo (forest green field,
   cream wordmark, gold rule under "STOCK FEEDS"). Type pairing
   is Roboto Slab (display) over Inter Tight (body) — both via
   next/font in the production app.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;700;800&family=Inter+Tight:wght@400;500;600;700&display=swap');

:root {
  /* ---- Brand colour primitives -------------------------------- */
  --paddock:       #2d4a2a;  /* deep forest green — primary brand surface */
  --paddock-deep:  #1e3a1e;  /* footer / pressed-button shade */
  --bone:          #ede4d0;  /* cream — text on dark surfaces */
  --bone-soft:     #f5efe1;  /* paper / light page background */
  --tan:           #b8945a;  /* gold — accent, links, CTAs */
  --tan-deep:      #8f6f3f;  /* hover state, eyebrow text on cream */
  --ink:           #1c1a16;  /* warm near-black body text */
  --ink-soft:      #4a463d;  /* secondary copy */

  /* Status accents (used sparingly — quote builder error / loading copy) */
  --amber-50:      #fffbeb;
  --amber-200:     #fde68a;
  --amber-900:     #78350f;
  --red-50:        #fef2f2;
  --red-200:       #fecaca;
  --red-800:       #991b1b;

  /* ---- Semantic colour roles --------------------------------- */
  --fg-1:           var(--ink);          /* primary body */
  --fg-2:           var(--ink-soft);     /* secondary copy */
  --fg-on-paddock:  var(--bone);         /* text on dark green */
  --fg-on-tan:      var(--paddock-deep); /* text on gold CTA */
  --bg-page:        var(--bone-soft);    /* default page background */
  --bg-card:        var(--bone);         /* subtle cream card */
  --bg-surface:     var(--bone-soft);    /* form inputs / wells */
  --bg-dark:        var(--paddock);      /* hero / footer-ish surfaces */
  --bg-dark-deep:   var(--paddock-deep); /* footer */
  --accent:         var(--tan);
  --accent-hover:   var(--tan-deep);
  --rule:           color-mix(in srgb, var(--ink) 10%, transparent);
  --rule-strong:    color-mix(in srgb, var(--ink) 15%, transparent);
  --focus-ring:     var(--paddock);

  /* ---- Type families ----------------------------------------- */
  --font-display: 'Roboto Slab', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* ---- Type scale (semantic) --------------------------------- */
  /* Hero / page titles use a fluid step from mobile to desktop. */
  --fs-h1:        clamp(2.125rem, 1.6rem + 2.4vw, 3rem);   /* 34 → 48 */
  --fs-h2:        clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); /* 28 → 36 */
  --fs-h3:        1.25rem;                                  /* 20 */
  --fs-h4:        1.125rem;                                 /* 18 */
  --fs-body:      1rem;                                     /* 16 — never smaller on inputs (iOS auto-zoom) */
  --fs-small:     0.875rem;                                 /* 14 */
  --fs-xs:        0.75rem;                                  /* 12 — eyebrows */
  --fs-eyebrow:   0.7rem;                                   /* 11.2 — uppercase wordmark eyebrow */

  /* ---- Weights ----------------------------------------------- */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-display:   800; /* hero only */

  /* ---- Line heights ------------------------------------------ */
  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-body:      1.6;

  /* ---- Letter spacing ---------------------------------------- */
  --tracking-wordmark: 0.08em;   /* the signature uppercase eyebrow */
  --tracking-tight:    -0.01em;

  /* ---- Spacing scale (multiples of 4) ------------------------ */
  --space-1:  0.25rem;   /*  4 */
  --space-2:  0.5rem;    /*  8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */

  /* Container width — pages use max-w-6xl (1152) or max-w-5xl (1024). */
  --container:        72rem;   /* 1152 */
  --container-prose:  64rem;   /* 1024 */
  --container-narrow: 48rem;   /*  768 — about / delivery / contact prose */

  /* ---- Radii ------------------------------------------------- */
  --radius-sm:  0.125rem;  /*  2 — small chips, logo image */
  --radius-md:  0.375rem;  /*  6 — buttons, cards, inputs (this is the default) */
  --radius-pill: 9999px;   /* the quote pill in the header */

  /* ---- Shadows ----------------------------------------------- */
  --shadow-sm:    0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-card:  0 1px 3px 0 rgb(0 0 0 / 0.06);
  --shadow-hero:  0 20px 60px -20px rgb(0 0 0 / 0.55); /* the logo on the dark hero */
  --shadow-focus: 0 0 0 1px var(--paddock);

  /* ---- Touch targets (mobile-first, real rural users) -------- */
  --touch-min:    44px;
  --button-h:     48px;
  --input-h:      44px;
}

/* ============================================================
   Semantic element defaults
   These keep h1/h2/p etc. consistent across the design system,
   the preview cards, and the UI kits without re-stating sizes.
   ============================================================ */

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
}

body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Inter Tight stylistic set / character variants — preserved from globals.css */
  font-feature-settings: 'ss01', 'cv11';
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }

p {
  margin: 0;
  text-wrap: pretty;
  line-height: var(--lh-body);
}

a {
  color: var(--paddock);
  text-decoration-line: underline;
  text-decoration-color: var(--tan);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.15s ease;
}
a:hover { text-decoration-color: var(--paddock); }

/* ============================================================
   Utility classes used by preview cards and UI kits
   ============================================================ */

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wordmark);
  color: var(--tan-deep);
}

.eyebrow--on-dark { color: var(--tan); }

.rule-tan {
  display: block;
  height: 1px;
  width: 4rem;          /* 64px — the signature tan rule */
  background: var(--tan);
}

.surface-page    { background: var(--bg-page); color: var(--fg-1); }
.surface-card    { background: var(--bg-card); color: var(--fg-1); }
.surface-paddock { background: var(--bg-dark); color: var(--fg-on-paddock); }
.surface-deep    { background: var(--bg-dark-deep); color: var(--fg-on-paddock); }

/* Buttons — three roles: primary (paddock), accent (tan), ghost (outlined). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-h);
  padding: 0 1.5rem;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
  box-shadow: var(--shadow-sm);
}
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--paddock); color: var(--bone); }
.btn--primary:hover { background: var(--paddock-deep); }

.btn--accent { background: var(--tan); color: var(--paddock-deep); }
.btn--accent:hover { background: var(--bone); }

.btn--ghost {
  background: var(--bg-surface);
  color: var(--paddock);
  border-color: color-mix(in srgb, var(--paddock) 30%, transparent);
  box-shadow: none;
}
.btn--ghost:hover { border-color: var(--paddock); }

.btn--link-tan {
  /* The understated text-link style — gold rule under the label, no fill. */
  background: transparent;
  color: var(--bone);
  text-decoration: underline;
  text-decoration-color: var(--tan);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  box-shadow: none;
  padding: 0;
  min-height: 0;
  font-weight: var(--fw-regular);
}
.btn--link-tan:hover { text-decoration-color: var(--bone); }

/* Form inputs — match production .input class from globals.css. */
.input {
  display: block;
  width: 100%;
  min-height: var(--input-h);
  padding: 0.625rem 0.75rem;
  background: var(--bg-surface);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input:focus { border-color: var(--paddock); box-shadow: var(--shadow-focus); }

/* Pill — header "Your quote (3)" cart button. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0 1rem;
  border-radius: var(--radius-pill);
  background: var(--paddock);
  color: var(--bone);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  border: 1px solid color-mix(in srgb, var(--paddock) 20%, transparent);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.pill__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--tan);
  color: var(--paddock-deep);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

/* The small "Ex Swan Hill" / "12% protein" chips used on product cards. */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wordmark);
}
.chip--paddock { background: color-mix(in srgb, var(--paddock) 10%, transparent); color: var(--paddock); }
.chip--tan     { color: var(--tan-deep); }