/* =============================================================================
   base.css — design tokens, reset, base typography
   Light-theme directory system following the audit recommendations:
   - Strict heading scale (32/20/16/15/13/11)
   - Single spacing token system (--gap-section 56px etc.)
   - Amazon-style restraint + maple-red brand accent
   ============================================================================= */

:root {
  /* ----- Brand --------------------------------------------------------- */
  --clr-primary:        #D0021B;
  --clr-primary-dark:   #A8011A;
  --clr-primary-darker: #7A0013;
  --clr-primary-light:  #FDECEE;
  --clr-primary-text:   #FFFFFF;

  /* ----- Navigation --------------------------------------------------- */
  --clr-nav-top:        #131A22;
  --clr-nav-top-text:   #FFFFFF;
  --clr-nav-top-hover:  #232F3E;
  --clr-nav-top-line:   #3B4754;
  --clr-nav-secondary:  #232F3E;

  /* ----- Surfaces ----------------------------------------------------- */
  --clr-page-bg:        #EAEDED;
  --clr-page-bg-soft:   #F7F7F7;       /* per audit 1.5 — alternating bg */
  --clr-card-bg:        #FFFFFF;
  --clr-card-bg-warm:   #FAFAF7;       /* per audit 2.4 — Editor's pick */
  --clr-border:         #D5D9D9;
  --clr-border-soft:    #E0E0E0;
  --clr-border-strong:  #888C8C;

  /* ----- Text --------------------------------------------------------- */
  --clr-text-primary:   #0F1111;
  --clr-text-secondary: #565959;
  --clr-text-muted:     #767676;
  --clr-text-on-dark:   #FFFFFF;
  --clr-text-on-dark-2: #AAAAAA;       /* per audit 1.6 — footer links */
  --clr-link:           #007185;
  --clr-link-hover:     #C7511F;

  /* ----- Status ------------------------------------------------------- */
  --clr-success:        #1E7E34;       /* per audit 3.3 */
  --clr-success-bg:     #E6F4EA;
  --clr-success-border: #34A853;
  --clr-error:          #CC0C39;
  --clr-error-bg:       #FBE9EC;

  /* Featured = amber, NOT brand red (audit 3.3) */
  --clr-featured:       #8B6914;
  --clr-featured-bg:    #FFF8E1;
  --clr-featured-border:#F9A825;
  --clr-warning:        #B8590B;
  --clr-warning-bg:     #FFF8E1;
  --clr-rating-star:    #FFA41C;

  /* ----- Category colour system (audit 2.6) --------------------------- */
  --clr-cat-farmers-markets:           #4A7C59;
  --clr-cat-csa-programs:              #5B8E7D;
  --clr-cat-u-pick-farms:              #C17B2E;
  --clr-cat-farm-stands:                #8B6914;
  --clr-cat-farm-to-table-restaurants: #7B3F3F;
  --clr-cat-organic-farms:             #4A6741;
  --clr-cat-heritage-breed-farms:      #6B4C3A;
  --clr-cat-farm-stays:                #4A6B7C;
  --clr-cat-food-hubs:                 #3F5B7B;

  /* ----- Typography (audit 5.1, 5.2) ---------------------------------- */
  --font-body:          Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-heading:       Arial, "Helvetica Neue", Helvetica, sans-serif;
  --letter-uppercase:   0.05em;

  /* ----- Layout dims -------------------------------------------------- */
  --max-width-page:     1500px;
  --max-width-content:  1400px;
  --max-width-article:  720px;

  /* ----- Spacing (audit 6.1: single system) --------------------------- */
  --gap-section: 56px;     /* between major page sections */
  --gap-heading: 20px;     /* between section heading and its content */
  --gap-card:    16px;     /* between cards in a grid */
  --pad-card:    16px;     /* internal card padding */
  --gap-inline:   8px;     /* between inline elements within a card */

  /* Legacy aliases kept for templates not yet migrated. */
  --space-xxs:  2px;
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  20px;
  --space-2xl: 28px;
  --space-3xl: 40px;
  --space-4xl: 56px;

  /* ----- Radii -------------------------------------------------------- */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  8px;
  --radius-pill: 999px;

  /* ----- Shadow ------------------------------------------------------- */
  --shadow-xs:    0 1px 1px rgba(15, 17, 17, 0.04);
  --shadow-sm:    0 1px 2px rgba(15, 17, 17, 0.08);
  --shadow-md:    0 2px 5px rgba(15, 17, 17, 0.13);
  --shadow-lg:    0 4px 12px rgba(15, 17, 17, 0.10);
  --shadow-focus: 0 0 0 3px rgba(208, 2, 27, 0.18);
  --shadow-amazon-focus: 0 0 3px 2px rgba(228, 121, 17, 0.50);
  --shadow-card:  var(--shadow-xs);

  /* ----- Motion ------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:  120ms;
  --duration-base:  180ms;
}

/* ----- Reset (audit 5.1: force font on every element) ------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--clr-text-primary);
  background-color: var(--clr-page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, a, span, li, td, th,
input, select, button, textarea {
  font-family: inherit;
}

/* ----- Typography scale (audit 5.2) ------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--gap-heading) 0;
  font-weight: 700;
  line-height: 1.3;
  color: var(--clr-text-primary);
}

h1 { font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: -0.012em; }
h2 { font-size: 20px; line-height: 1.3; font-weight: 700; }
h3 { font-size: 16px; line-height: 1.4; font-weight: 600; }
h4 { font-size: 14px; font-weight: 700; }

@media (max-width: 760px) {
  h1 { font-size: 24px; }
}

p { margin: 0 0 var(--gap-heading) 0; font-size: 15px; line-height: 1.6; }

a {
  color: var(--clr-link);
  text-decoration: none;
}
a:hover { color: var(--clr-link-hover); text-decoration: underline; }

strong, b { font-weight: 700; }
em, i { font-style: italic; }

img, svg { vertical-align: middle; max-width: 100%; height: auto; }

button { font-family: inherit; cursor: pointer; }

ul, ol { padding-left: 1.4em; margin: 0 0 var(--gap-heading) 0; }

table { border-collapse: collapse; }

input, textarea, select {
  font-family: inherit;
  font-size: 14px;
  color: var(--clr-text-primary);
}

hr {
  border: 0;
  border-top: 1px solid var(--clr-border);
  margin: var(--gap-section) 0;
}

::selection { background: #FFD814; color: var(--clr-text-primary); }

/* ----- Accessibility --------------------------------------------------- */
:focus-visible {
  outline: 2px solid #E47911;
  outline-offset: 1px;
}

.ft-skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-lg);
  background: var(--clr-text-primary);
  color: #fff;
  padding: var(--space-sm) var(--space-lg);
  z-index: 10000;
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.ft-skip-link:focus { top: var(--space-lg); }

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

/* ----- Page container -------------------------------------------------- */
.ft-page {
  max-width: var(--max-width-page);
  margin: 0 auto;
}

.ft-content {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: var(--gap-heading) var(--space-lg);
}

.ft-content--narrow { max-width: 1000px; }
.ft-content--tight  { max-width: 760px; }

/* Section background alternation (audit 1.5) */
.ft-section { padding: var(--gap-section) 0; }
.ft-section--white { background: #FFFFFF; }
.ft-section--grey  { background: var(--clr-page-bg-soft); }
.ft-section--dark  { background: var(--clr-nav-secondary); color: var(--clr-text-on-dark); }
.ft-section-inner {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* ----- Utility classes ------------------------------------------------- */
.ft-text-muted     { color: var(--clr-text-muted); }
.ft-text-secondary { color: var(--clr-text-secondary); }
.ft-text-success   { color: var(--clr-success); }
.ft-text-error     { color: var(--clr-error); }
.ft-text-bold      { font-weight: 700; }
.ft-text-center    { text-align: center; }
.ft-text-up        { text-transform: uppercase; letter-spacing: var(--letter-uppercase); }
.ft-mt-md { margin-top: var(--gap-heading); }
.ft-mt-lg { margin-top: 28px; }
.ft-mt-xl { margin-top: var(--gap-section); }
.ft-mb-md { margin-bottom: var(--gap-heading); }
.ft-mb-lg { margin-bottom: 28px; }

.ft-icon {
  display: inline-block;
  width: 16px; height: 16px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  vertical-align: -3px;
  flex-shrink: 0;
}
.ft-icon--sm { width: 14px; height: 14px; }
.ft-icon--lg { width: 20px; height: 20px; stroke-width: 1.6; }

/* ----- Flash messages -------------------------------------------------- */
.ft-flash-stack {
  max-width: var(--max-width-content);
  margin: var(--space-md) auto 0;
  padding: 0 var(--space-lg);
}
.ft-flash {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
  font-size: 14px;
  border: 1px solid;
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}
.ft-flash-success { background: var(--clr-success-bg); border-color: #BFE0BF; color: #146C2E; }
.ft-flash-error   { background: var(--clr-error-bg);   border-color: #F1B5BE; color: var(--clr-error); }
.ft-flash-info    { background: #E7F3FB; border-color: #B4D8EE; color: #146EB4; }
.ft-flash-warning { background: var(--clr-warning-bg); border-color: #F2C97D; color: var(--clr-warning); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}