/* ============================================================
   Evergreen Growers — Design Tokens
   Colour, type, spacing, radius, shadow, motion
   ============================================================ */

/* ── Fonts ────────────────────────────────────────────────── */
/* SUBSTITUTION: no brand fonts shipped in codebase; using Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ── Colour — Green (primary brand family) ─────────────── */
  --green-darkest: #1e3f2b;
  --green-dark:    #2d5a3d;   /* primary brand green */
  --green-mid:     #4a7c59;
  --green-light:   #7aab8a;
  --green-pale:    #c8dcce;
  --green-wash:    #eaf1ec;   /* tinted surfaces */

  /* ── Colour — Cream / parchment (background family) ────── */
  --cream-darkest: #d8cdb5;
  --cream-dark:    #e8e0d0;
  --cream-mid:     #f5f0e8;
  --cream-light:   #faf7f2;   /* default page background */
  --white:         #ffffff;

  /* ── Colour — Brown / bark (supporting family) ─────────── */
  --brown-dark:    #5c4a1e;
  --brown-mid:     #8b6914;   /* eyebrow labels */
  --brown-light:   #c4a55a;

  /* ── Colour — Clay (accent, small doses) ───────────────── */
  --clay-dark:     #a0482c;
  --clay-mid:      #c26346;   /* low-stock badges, focus highlight */
  --clay-light:    #e8bba9;

  /* ── Colour — Text ─────────────────────────────────────── */
  --text-dark:     #3d2b1f;   /* body text on cream */
  --text-mid:      #5c4a3a;
  --text-light:    #8b7355;
  --text-on-green: #faf7f2;
  --text-on-photo: #ffffff;

  /* ── Colour — Semantic ─────────────────────────────────── */
  --success:       #3a7d4a;
  --success-bg:    #dfece3;
  --info:          #4a7a9c;
  --info-bg:       #dbe6ef;
  --warning:       #b58321;
  --warning-bg:    #f6ecd3;
  --danger:        #a63b2a;
  --danger-bg:     #f3dcd7;

  /* ── Foreground / background semantic aliases ──────────── */
  --fg-1:          var(--text-dark);     /* primary text */
  --fg-2:          var(--text-mid);      /* secondary */
  --fg-3:          var(--text-light);    /* tertiary / hint */
  --fg-brand:      var(--green-dark);
  --fg-accent:     var(--brown-mid);
  --bg-1:          var(--cream-light);   /* page */
  --bg-2:          var(--cream-mid);     /* section */
  --bg-3:          var(--cream-dark);    /* divider fill */
  --bg-card:       var(--white);
  --bg-brand:      var(--green-dark);

  /* ── Borders ───────────────────────────────────────────── */
  --border-hairline: 1px solid var(--cream-dark);
  --border-strong:   1px solid var(--cream-darkest);
  --border-brand:    1px solid var(--green-mid);

  /* ── Type — families ───────────────────────────────────── */
  --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ── Type — size scale (px values for clarity) ─────────── */
  --fs-xs:    10px;   /* micro labels */
  --fs-sm:    12px;   /* eyebrow labels */
  --fs-base:  14px;   /* UI default */
  --fs-md:    16px;   /* body */
  --fs-lg:    18px;   /* lead paragraph */
  --fs-xl:    20px;   /* small heading */
  --fs-2xl:   24px;   /* h3 */
  --fs-3xl:   32px;   /* h2 */
  --fs-4xl:   40px;   /* h1 on page */
  --fs-5xl:   56px;   /* hero */
  --fs-6xl:   72px;   /* display */

  /* ── Type — weights ────────────────────────────────────── */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ── Type — line heights ───────────────────────────────── */
  --lh-tight:    1.15;
  --lh-snug:     1.3;
  --lh-normal:   1.55;
  --lh-loose:    1.75;

  /* ── Type — letter spacing ─────────────────────────────── */
  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;   /* eyebrows */

  /* ── Spacing — 4px base unit ───────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;

  /* ── Layout ────────────────────────────────────────────── */
  --content-max:   1180px;
  --content-narrow: 720px;
  --nav-height:    64px;

  /* ── Radius ────────────────────────────────────────────── */
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    12px;
  --radius-xl:    20px;
  --radius-pill:  999px;

  /* ── Shadows / elevation (warm brown alpha) ────────────── */
  --elev-0:  none;
  --elev-1:  0 1px 2px rgba(61, 43, 31, 0.06), 0 1px 3px rgba(61, 43, 31, 0.05);
  --elev-2:  0 4px 12px rgba(61, 43, 31, 0.08), 0 2px 4px rgba(61, 43, 31, 0.05);
  --elev-3:  0 16px 40px rgba(61, 43, 31, 0.14), 0 6px 12px rgba(61, 43, 31, 0.08);
  --elev-focus: 0 0 0 3px rgba(74, 124, 89, 0.22);

  /* ── Photo scrim gradients ─────────────────────────────── */
  --scrim-dark:  linear-gradient(135deg, rgba(30, 63, 43, 0.72), rgba(74, 124, 89, 0.48));
  --scrim-light: linear-gradient(180deg, rgba(250, 247, 242, 0) 40%, rgba(250, 247, 242, 0.92) 100%);

  /* ── Motion ────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-micro:   120ms;
  --dur-short:   220ms;
  --dur-long:    380ms;

  /* legacy aliases retained for the Flask app ────────────── */
  --shadow:       var(--elev-1);
  --radius:       var(--radius-md);
}

/* ============================================================
   Base element styling (semantic defaults)
   ============================================================ */

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  font-feature-settings: "ss01", "cv11";
}

/* ── Headings ────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-brand);
  margin: 0;
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }

h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0;
}
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); }

/* ── Display heading (hero) ──────────────────────────────── */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

/* ── Body text ───────────────────────────────────────────── */
p  { margin: 0; }
.lead { font-size: var(--fs-lg); line-height: var(--lh-normal); color: var(--fg-2); }
.body { font-size: var(--fs-md); line-height: var(--lh-normal); }
.small { font-size: var(--fs-base); color: var(--fg-2); }
.micro { font-size: var(--fs-sm); color: var(--fg-3); }

/* ── Eyebrow label ───────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* ── Price / tabular ─────────────────────────────────────── */
.price, .tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ── Links ───────────────────────────────────────────────── */
a {
  color: var(--green-mid);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-out);
}
a:hover {
  color: var(--green-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Selection ───────────────────────────────────────────── */
::selection {
  background: var(--green-pale);
  color: var(--green-darkest);
}