/* ============================================================
   Prole Pasture · B & D Ag Enterprises, LLC
   Brand design tokens — CSS custom properties
   Import with:  @import "/brand/tokens/brand-tokens.css";
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,800;1,9..144,400;1,9..144,600;1,9..144,700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* -------- COLOR · Primary (v4 "Prairie Editorial" palette) --------
     The keeper. Warren County hues, editorial restraint: deep
     crop-green, brick red, bright ivory paper, soft harvest gold,
     espresso-soil ink. Warmth comes from light + photography —
     the UI stays quiet so the golden-hour imagery and the
     cinematic bull carry the feeling. */
  --pp-pasture:      #3b5a2a;   /* deep crop green — headlines, primary surfaces */
  --pp-pasture-2:    #4c7136;   /* 1-step lighter for hover / secondary ink */
  --pp-pasture-3:    #253d1b;   /* 1-step darker for reverse-on-cream contrast */

  /* -------- COLOR · Paper -------- */
  --pp-bone:         #faf5ea;   /* bright warm ivory — default page background */
  --pp-bone-2:       #fffdf8;   /* near-white — card surfaces */
  --pp-bone-3:       #efe7d3;   /* darker ivory — dividers on cream */

  /* -------- COLOR · Accent -------- */
  --pp-terracotta:   #a6432c;   /* brick red — CTAs, links, rules, highlights */
  --pp-terracotta-2: #873321;   /* brick red hover */

  /* -------- COLOR · Neutral -------- */
  --pp-stone:        #87806e;   /* warm stone — body text on cream */
  --pp-stone-2:      #aba490;   /* muted captions */
  --pp-ink:          #221e15;   /* espresso-soil ink (use sparingly) */

  /* -------- COLOR · Utility -------- */
  --pp-success:      #4a8a3c;
  --pp-warning:      #d99c3e;   /* soft harvest gold accent */
  --pp-error:        #873321;
  --pp-rule:         rgba(34, 30, 21, 0.12);

  /* -------- TYPOGRAPHY -------- */
  --pp-font-display: 'Fraunces', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --pp-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pp-font-mono:    ui-monospace, 'SF Mono', Consolas, monospace;

  /* Type scale (fluid, clamped) */
  --pp-text-xs:  clamp(11px, 0.72vw, 12px);
  --pp-text-sm:  clamp(13px, 0.85vw, 14px);
  --pp-text-base:clamp(15px, 1vw,    16px);
  --pp-text-md:  clamp(17px, 1.1vw,  18px);
  --pp-text-lg:  clamp(20px, 1.4vw,  22px);
  --pp-text-xl:  clamp(28px, 2.2vw,  34px);
  --pp-text-2xl: clamp(38px, 3.2vw,  52px);
  --pp-text-3xl: clamp(52px, 5vw,    84px);
  --pp-text-hero:clamp(64px, 7vw,   120px);

  /* -------- LAYOUT -------- */
  --pp-maxw:       1280px;
  --pp-gutter:     clamp(20px, 4vw, 64px);
  --pp-radius-sm:  8px;   /* friendlier, rounder buttons + inputs */
  --pp-radius-md:  12px;
  --pp-radius-lg:  16px;

  /* -------- MOTION -------- */
  --pp-ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --pp-dur-fast:   160ms;
  --pp-dur-base:   260ms;
  --pp-dur-slow:   480ms;

  /* -------- ELEVATION -------- */
  --pp-shadow-sm:  0 1px 2px rgba(20,17,15,0.06), 0 1px 0 rgba(20,17,15,0.04);
  --pp-shadow-md:  0 4px 12px rgba(20,17,15,0.08), 0 2px 4px rgba(20,17,15,0.06);
  --pp-shadow-lg:  0 16px 40px rgba(20,17,15,0.14), 0 4px 10px rgba(20,17,15,0.06);
}

/* ============================================================
   Base reset + typography defaults
   ============================================================ */
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
  background: var(--pp-bone);
  color: var(--pp-pasture);
  font-family: var(--pp-font-body);
  font-size: var(--pp-text-base);
  line-height: 1.6;
  margin: 0;
}
h1, h2, h3, h4 {
  font-family: var(--pp-font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--pp-pasture);
  margin: 0 0 0.5em;
}
h1 { font-size: var(--pp-text-hero); line-height: 0.96; font-weight: 400; }
h2 { font-size: var(--pp-text-3xl);  line-height: 1.04; font-weight: 500; }
h3 { font-size: var(--pp-text-2xl);  line-height: 1.15; }
h4 { font-size: var(--pp-text-xl);   line-height: 1.25; }

.pp-italic       { font-style: italic; }
.pp-kicker       { font-family: var(--pp-font-body); text-transform: uppercase; letter-spacing: 0.22em; font-size: var(--pp-text-xs); font-weight: 600; color: var(--pp-stone); }
.pp-caption      { font-size: var(--pp-text-sm); color: var(--pp-stone); }
.pp-accent       { color: var(--pp-terracotta); }
.pp-rule         { border-top: 1px solid var(--pp-rule); }

/* Button — primary */
.pp-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--pp-font-body); font-weight: 600; font-size: var(--pp-text-sm);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 14px 28px; border-radius: var(--pp-radius-sm);
  background: var(--pp-pasture); color: var(--pp-bone);
  text-decoration: none; border: 0; cursor: pointer;
  transition: background var(--pp-dur-base) var(--pp-ease), transform var(--pp-dur-fast) var(--pp-ease);
}
.pp-btn:hover { background: var(--pp-pasture-3); transform: translateY(-1px); }
.pp-btn-accent { background: var(--pp-terracotta); }
.pp-btn-accent:hover { background: var(--pp-terracotta-2); }
.pp-btn-ghost { background: transparent; color: var(--pp-pasture); box-shadow: inset 0 0 0 1px var(--pp-pasture); }