/* ============================================
   Fraser Valley Specialty Poultry — Design Tokens
   --------------------------------------------
   Palette + fonts captured from the live site (Phase 2). FVSP brand:
   red (#be2626) + charcoal, Montserrat body/headings, Skippy Sharp accent.
   This is the ONE file to edit for palette/type changes.
   ============================================ */

/* Self-hosted brand display font (brush/handwritten accent — no CDN) */
@font-face {
  font-family: "Skippy Sharp";
  src: url("/fonts/SkippySharp.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* No dark mode by design (brand look-alike) — this stops dark-themed
     browsers from forcing dark form controls/scrollbars into the light UI. */
  color-scheme: light;

  /* Colors — Brand */
  --ink: #20272c;          /* charcoal — header, footer, dark sections, headings */
  --ink-deep: #171c20;
  --brand: #be2626;        /* FVSP red — primary CTAs, accents, highlights */
  --brand-deep: #9e1f1f;   /* darker red — hover, accessible link text on white */
  --accent: #7ebec5;       /* teal — secondary decorative accent */
  --accent-deep: #3f7c83;  /* deeper teal — text-safe: 4.75:1 on white (was #4f9aa2 at 3.2) */
  --white: #FFFFFF;
  --cream: #f5f6f6;        /* light neutral — alt sections */
  --sand: #ececec;         /* tint */

  /* Colors — Functional */
  --text-primary: #1e1e1e;   /* ink body/heading text */
  --text-secondary: #666666; /* muted body text */
  --text-light: #666c72; /* WCAG AA: 5.3:1 on white, 4.8:1 on cream (was #8a8f93 at ~3:1) */
  --text-on-dark: #e7eaec;
  --text-on-brand: #ffffff;  /* white text on red */
  --border: #e2e4e6;
  --border-light: #eef0f1;

  /* Typography */
  --font-body: "Montserrat", Helvetica, Arial, "Lucida Grande", sans-serif;
  --font-heading: "Montserrat", Helvetica, Arial, sans-serif;
  --font-display: "Skippy Sharp", "Montserrat", cursive;  /* brand brush accent */

  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.25rem;

  /* Live-site type scale, measured element-by-element at 2048px (2026-08-29).
     The rebuild was consistently a step below live, which is the other half of
     the "text is smaller" note — the widths alone did not close it. */
  --text-display: 3.125rem;   /* 50px — hero/section/photo-band headings */
  --text-eyebrow: 1.875rem;   /* 30px — Skippy Sharp script eyebrow */
  --text-card-title: 1.5625rem; /* 25px — feature-card titles */
  --text-card-body: 0.9375rem;  /* 15px — feature-card body copy */
  --text-body: 1.125rem;        /* 18px — body copy, prose, hero subtitles */

  --leading-tight: 1.15;
  /* Live runs body copy at 18px/27px (1.5) and card body at 15px/24px (1.6).
     Ours was 1.6/1.75, which made every text block visibly taller than live. */
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* Layout — matched to the live site by direct measurement (Playwright, 2026-08-29,
     viewports 1366→2560). Content width is Divi's global `max-width: 1440px`.
     Banners are UNCAPPED — they keep growing with the viewport, which is why the
     old fixed 1340px cap read as "narrower than the current site" on wide displays:
       · interior page banners  = calc(100% - 100px), border-radius 16px, ~550px tall
       · home hero slider       = 90%, square corners, ~630px tall  */
  --max-width: 1440px;
  /* Two distinct narrow widths on live, measured 2026-08-29 across 375→2048:
       FAQ accordions and prose  — capped at 980px
       centred intro/story blocks — viewport-relative 64%, uncapped (1311px @2048)
     A single 900px cap was serving both, leaving the intro blocks ~400px
     narrower than live on a wide screen. */
  --max-width-narrow: 980px;
  --max-width-intro: 64%;
  --max-width-wide: 1440px;
  --banner-inset: calc(100% - 100px);  /* interior page banners + photo bands */
  --banner-inset-wide: calc(100% - 80px); /* photo bands that carry a card row */
  --banner-home: 90%;                  /* home hero slider */
  --banner-radius: 16px;
  /* Mobile content column. Live puts a ~40px gutter each side on phones, giving
     332px at 412 and 295px at 375 — both measured. Ours was a flat 16px, which
     is what Joanne saw as the margins not matching (rev.3, nearly every item). */
  --mobile-content: calc(100% - 80px);
  /* Live sets mobile body copy at weight 500, not 400 — same 18px/27px, but ours
     read lighter and therefore smaller. */
  --weight-body-mobile: 500;
  --banner-min-h: 550px;
  --banner-min-h-home: 630px;

  /* Borders & Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(32, 39, 44, 0.08);
  --shadow-md: 0 4px 12px rgba(32, 39, 44, 0.10);
  --shadow-lg: 0 8px 30px rgba(32, 39, 44, 0.12);
  --shadow-xl: 0 16px 50px rgba(32, 39, 44, 0.16);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

/* Live steps its DISPLAY type down on narrow screens — measured by tracking the
   same headings across viewports: 50px above 980, 45px at 768–980, 38px at ≤767.
   Body copy does NOT step: live serves 18px/27px at every width including 375
   (an earlier 16px reading was the store-closing notice, not body copy).
   Redefining the token scales every consumer at once. */
@media (max-width: 980px) {
  :root { --text-display: 2.8125rem; }   /* 45px */
}
@media (max-width: 767px) {
  :root { --text-display: 2.375rem; }    /* 38px */
}