/* ============================================================
   VIRTUOUS VICTORIES — DESIGN TOKENS
   Direction A: Seed Catalog
   Load this once in your child theme. Everything inherits it.
   ============================================================ */

/* ---------- FONTS ----------
   Quick start: paste this <link> in your theme header.
   Later, self-host with a plugin (OMGF) for speed + privacy.

   <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..800,0..100,0..1&family=Karla:wght@300..700&display=swap" rel="stylesheet">
--------------------------------------------------------- */

:root {

  /* ---------- COLOR ---------- */
  --vv-ink:        #1F3D2B;  /* deep bottle green — replaces black */
  --vv-ink-soft:   #40604C;  /* secondary text, captions */
  --vv-ink-faint:  #7A8F80;  /* metadata, timestamps */

  --vv-paper:      #FAF4E6;  /* cream — the page background */
  --vv-paper-warm: #F3EAD6;  /* card fills, table stripes, quote blocks */
  --vv-white:      #FFFDF8;  /* raised surfaces, cards on paper */

  --vv-calendula:  #E88A1E;  /* PRIMARY ACCENT — the workhorse */
  --vv-calendula-deep: #B96809;  /* hover, and text-on-cream (contrast-safe) */

  --vv-zinnia:     #C6376F;  /* THE POP — rationed, 1-2 uses per page */
  --vv-zinnia-deep:#9E2354;

  --vv-sage:       #A8B89C;  /* support — borders, dividers, tints */
  --vv-sage-tint:  #E4EADD;  /* callout backgrounds, hover fills */

  /* ---------- TYPE ---------- */
  --vv-display: 'Fraunces', Georgia, serif;
  --vv-body:    'Karla', -apple-system, system-ui, sans-serif;

  /* Type scale — 1.25 major third */
  --vv-t-xs:   0.8rem;    /* 12.8px — metadata */
  --vv-t-sm:   0.9rem;    /* 14.4px — captions */
  --vv-t-base: 1.125rem;  /* 18px — body. Big on purpose; it's a reading site */
  --vv-t-lg:   1.406rem;  /* 22.5px — lead paragraph */
  --vv-t-xl:   1.758rem;  /* 28px — h3 */
  --vv-t-2xl:  2.197rem;  /* 35px — h2 */
  --vv-t-3xl:  2.75rem;   /* 44px — h1 */
  --vv-t-4xl:  3.5rem;    /* 56px — hero */

  --vv-leading-tight: 1.15;
  --vv-leading-body:  1.7;

  /* ---------- SPACE ---------- */
  --vv-s-1: 0.5rem;
  --vv-s-2: 1rem;
  --vv-s-3: 1.5rem;
  --vv-s-4: 2rem;
  --vv-s-5: 3rem;
  --vv-s-6: 4.5rem;
  --vv-s-7: 7rem;

  /* ---------- STRUCTURE ---------- */
  --vv-measure: 68ch;     /* max reading width — do not exceed */
  --vv-wide:    1180px;   /* full container */
  --vv-radius:  4px;      /* restrained. Vintage print isn't round. */
  --vv-radius-lg: 8px;
  --vv-rule: 1px solid var(--vv-sage);
}

/* ============================================================
   BASE
   ============================================================ */

body {
  background: var(--vv-paper);
  color: var(--vv-ink);
  font-family: var(--vv-body);
  font-size: var(--vv-t-base);
  line-height: var(--vv-leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--vv-display);
  color: var(--vv-ink);
  line-height: var(--vv-leading-tight);
  font-weight: 600;
  /* Fraunces variable axes: SOFT rounds the terminals, WONK adds the
     hand-cut irregularity. This is what makes it read "seed packet." */
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  margin: 0 0 var(--vv-s-2);
  text-wrap: balance;
}

h1 { font-size: var(--vv-t-3xl); }
h2 { font-size: var(--vv-t-2xl); margin-top: var(--vv-s-5); }
h3 { font-size: var(--vv-t-xl);  margin-top: var(--vv-s-4); font-weight: 500; }

p { margin: 0 0 var(--vv-s-2); }

/* Body copy never runs wider than the measure. Long-line text is the
   #1 thing that makes a self-built blog feel unprofessional. */
.vv-prose > p,
.vv-prose > h2,
.vv-prose > h3,
.vv-prose > ul,
.vv-prose > ol,
.vv-prose > blockquote {
  max-width: var(--vv-measure);
}

.vv-lead {
  font-size: var(--vv-t-lg);
  color: var(--vv-ink-soft);
  line-height: 1.5;
}

/* ---------- LINKS ---------- */
a {
  color: var(--vv-ink);
  text-decoration: none;
  background-image: linear-gradient(var(--vv-calendula), var(--vv-calendula));
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .18s ease, color .18s ease;
}
a:hover {
  color: var(--vv-calendula-deep);
  background-size: 100% 100%;
  background-image: linear-gradient(var(--vv-sage-tint), var(--vv-sage-tint));
}

/* ============================================================
   COMPONENTS
   ============================================================ */

/* ---------- BUTTONS ---------- */
.vv-btn {
  display: inline-block;
  font-family: var(--vv-body);
  font-size: var(--vv-t-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.9rem 2rem;
  border-radius: var(--vv-radius);
  border: 1px solid transparent;
  cursor: pointer;
  background-image: none;
  transition: all .18s ease;
}

/* Primary — calendula. This is your default CTA everywhere. */
.vv-btn-primary {
  background: var(--vv-calendula);
  color: var(--vv-ink);
  border-color: var(--vv-calendula);
}
.vv-btn-primary:hover {
  background: var(--vv-calendula-deep);
  color: var(--vv-paper);
  border-color: var(--vv-calendula-deep);
}

/* Secondary — outline. Use for anything that isn't THE action. */
.vv-btn-secondary {
  background: transparent;
  color: var(--vv-ink);
  border-color: var(--vv-ink);
}
.vv-btn-secondary:hover {
  background: var(--vv-ink);
  color: var(--vv-paper);
}

/* Zinnia — the pop. ONE per page, maximum. Newsletter signup, usually. */
.vv-btn-zinnia {
  background: var(--vv-zinnia);
  color: var(--vv-white);
  border-color: var(--vv-zinnia);
}
.vv-btn-zinnia:hover {
  background: var(--vv-zinnia-deep);
  border-color: var(--vv-zinnia-deep);
}

/* ---------- CARDS ---------- */
.vv-card {
  background: var(--vv-white);
  border: var(--vv-rule);
  border-radius: var(--vv-radius-lg);
  padding: var(--vv-s-3);
}

/* ---------- TAGS ---------- */
.vv-tag {
  display: inline-block;
  font-size: var(--vv-t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: var(--vv-radius);
  background: var(--vv-sage-tint);
  color: var(--vv-ink);
  background-image: none;
}
.vv-tag-zinnia { background: var(--vv-zinnia); color: var(--vv-white); }

/* ---------- CALLOUT (Zone 6a timing, tips) ---------- */
.vv-callout {
  border-left: 3px solid var(--vv-calendula);
  background: var(--vv-paper-warm);
  padding: var(--vv-s-2) var(--vv-s-3);
  margin: var(--vv-s-4) 0;
  max-width: var(--vv-measure);
}
.vv-callout-label {
  font-family: var(--vv-display);
  font-weight: 600;
  font-size: var(--vv-t-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vv-calendula-deep);
  display: block;
  margin-bottom: var(--vv-s-1);
}
.vv-callout p:last-child { margin-bottom: 0; }

/* ---------- PULL QUOTE ---------- */
.vv-quote {
  font-family: var(--vv-display);
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
  font-size: var(--vv-t-xl);
  font-weight: 400;
  font-style: italic;
  line-height: 1.35;
  color: var(--vv-ink);
  border: none;
  border-top: 2px solid var(--vv-zinnia);
  border-bottom: 2px solid var(--vv-zinnia);
  padding: var(--vv-s-3) 0;
  margin: var(--vv-s-5) 0;
  max-width: var(--vv-measure);
}

/* ---------- AFFILIATE DISCLOSURE ----------
   Required by the FTC and by Amazon Associates' operating agreement.
   Must appear ABOVE the first affiliate link on any page that has one. */
.vv-disclosure {
  font-size: var(--vv-t-sm);
  color: var(--vv-ink-soft);
  background: var(--vv-sage-tint);
  border-radius: var(--vv-radius);
  padding: var(--vv-s-1) var(--vv-s-2);
  margin: 0 0 var(--vv-s-3);
  max-width: var(--vv-measure);
  line-height: 1.5;
}

/* ---------- DIVIDER ---------- */
.vv-rule {
  border: none;
  border-top: var(--vv-rule);
  margin: var(--vv-s-5) 0;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.vv-container {
  width: 100%;
  max-width: var(--vv-wide);
  margin: 0 auto;
  padding: 0 var(--vv-s-3);
}
.vv-section { padding: var(--vv-s-6) 0; }

/* ============================================================
   RESPONSIVE — type scales down, spacing tightens
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --vv-t-base: 1.0625rem;
    --vv-t-3xl:  2.25rem;
    --vv-t-4xl:  2.5rem;
    --vv-t-2xl:  1.75rem;
    --vv-s-6: 3rem;
    --vv-s-7: 4rem;
  }
}