/* =============================================================
   WB Rural — Color & Type Tokens
   Premium, institutional, rural consultancy brand.
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&family=Montserrat:wght@300;400;500;600;700;800&display=swap");

:root {
  /* ---------- Brand Palette (official) ---------- */
  --wb-green: #0F2F24;            /* Verde institucional escuro — primary */
  --wb-gold: #C6A756;             /* Dourado fosco premium — accent */
  --wb-white: #FFFFFF;            /* Branco — light base */

  /* ---------- Extended Greens (deepened ladder, used sparingly) ---------- */
  --wb-green-950: #081A14;        /* Near-black, for very deep cards / hover */
  --wb-green-900: #0F2F24;        /* = brand primary */
  --wb-green-800: #143D2F;
  --wb-green-700: #1B4D3B;
  --wb-green-600: #25684F;
  --wb-green-500: #3A8769;        /* For subtle accents only */

  /* ---------- Extended Golds (warm, low-saturation) ---------- */
  --wb-gold-700: #9C8240;
  --wb-gold-600: #B5973F;
  --wb-gold-500: #C6A756;         /* = brand accent */
  --wb-gold-400: #D4BB7A;
  --wb-gold-300: #E4D2A2;
  --wb-gold-200: #F1E6CB;
  --wb-gold-100: #FAF5E8;         /* Cream / paper tone */

  /* ---------- Neutrals (warm, paper-leaning) ---------- */
  --wb-paper: #FBFAF6;            /* Subtle warm white — primary surface */
  --wb-paper-2: #F5F2E9;          /* Stationery / quote backgrounds */
  --wb-line: #E5E0D2;             /* Hairline borders */
  --wb-mute: #B6AE99;             /* Muted gold-grey — meta text */
  --wb-graphite: #4A4A45;         /* Body on light */
  --wb-ink: #1A1A18;              /* Print-grade near-black */

  /* ---------- Semantic foreground / background ---------- */
  --fg-1: var(--wb-ink);          /* Headlines, primary text on light */
  --fg-2: var(--wb-graphite);     /* Body copy on light */
  --fg-3: var(--wb-mute);         /* Tertiary, captions, meta */
  --fg-on-dark: var(--wb-paper);  /* Body on green */
  --fg-on-dark-mute: rgba(251,250,246,0.66);
  --fg-accent: var(--wb-gold);    /* Gold accent text */

  --bg-1: var(--wb-paper);        /* Default light surface */
  --bg-2: var(--wb-paper-2);      /* Alt light surface (stationery) */
  --bg-dark: var(--wb-green);     /* Default dark surface */
  --bg-dark-2: var(--wb-green-950);

  --border-1: var(--wb-line);
  --border-strong: var(--wb-graphite);
  --border-on-dark: rgba(198,167,86,0.35);
  --border-gold: var(--wb-gold);

  /* ---------- Type families ---------- */
  --font-serif: "Playfair Display", "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-sans: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ---------- Type scale (institutional / editorial) ---------- */
  --t-display: clamp(56px, 7.4vw, 104px);   /* Hero / cover */
  --t-h1: clamp(40px, 4.4vw, 64px);
  --t-h2: clamp(28px, 2.6vw, 40px);
  --t-h3: 24px;
  --t-h4: 18px;
  --t-eyebrow: 12px;     /* uppercase label */
  --t-body: 16px;
  --t-body-lg: 18px;
  --t-meta: 13px;
  --t-fine: 11px;        /* fine print */

  --tracking-eyebrow: 0.22em;
  --tracking-uppercase: 0.14em;
  --tracking-body: 0.005em;
  --tracking-display: -0.01em;

  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-body: 1.55;
  --leading-loose: 1.7;

  /* ---------- Spacing scale (4px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- Radii (mostly squared / institutional) ---------- */
  --radius-0: 0px;
  --radius-1: 2px;       /* Subtle softening — preferred default */
  --radius-2: 4px;       /* Cards / inputs */
  --radius-3: 8px;       /* Larger cards */
  --radius-pill: 999px;  /* Tag chips only */

  /* ---------- Elevation / shadows (restrained, warm) ---------- */
  --shadow-1: 0 1px 2px rgba(15,47,36,0.06), 0 1px 1px rgba(15,47,36,0.04);
  --shadow-2: 0 4px 12px rgba(15,47,36,0.08), 0 2px 4px rgba(15,47,36,0.05);
  --shadow-3: 0 14px 40px rgba(15,47,36,0.14), 0 4px 10px rgba(15,47,36,0.06);
  --shadow-inset-line: inset 0 0 0 1px var(--wb-line);
  --shadow-gold-ring: 0 0 0 1px rgba(198,167,86,0.5);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out-soft: cubic-bezier(0.16, 0.84, 0.32, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-narrow: 880px;
  --gutter: clamp(20px, 4vw, 56px);
  --rule-thickness: 1px;
}

/* =============================================================
   Base Element Styles
   ============================================================= */

.wb {
  color: var(--fg-1);
  background: var(--bg-1);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wb-dark {
  color: var(--fg-on-dark);
  background: var(--bg-dark);
}

/* ---------- Display & headings (Playfair Display, italic occasional) ---------- */
.wb-display {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.wb-h1, h1.wb {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--t-h1);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.wb-h2, h2.wb {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

.wb-h3, h3.wb {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.3;
}

.wb-h4, h4.wb {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h4);
  letter-spacing: 0.02em;
  line-height: 1.35;
}

/* ---------- Eyebrow / kicker — used heavily in this brand ---------- */
.wb-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--wb-gold);
}

.wb-eyebrow.on-light { color: var(--wb-gold-700); }

/* ---------- Body & meta ---------- */
.wb-body, p.wb {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--leading-body);
  color: var(--fg-2);
}

.wb-body-lg {
  font-size: var(--t-body-lg);
  line-height: var(--leading-loose);
  color: var(--fg-2);
}

.wb-lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.45;
  color: var(--fg-1);
}

.wb-meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-meta);
  letter-spacing: 0.04em;
  color: var(--fg-3);
}

.wb-fine {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-fine);
  letter-spacing: 0.06em;
  color: var(--fg-3);
}

/* ---------- Common decorative elements ---------- */
.wb-rule-gold {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--wb-gold);
  border: 0;
}

.wb-rule-thin {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--border-1);
  border: 0;
}

.wb-rule-gold-spindle {
  /* The decorative gold rule with a small ◆ in the center, used in marketing */
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--wb-gold);
  font-size: 8px;
}
.wb-rule-gold-spindle::before,
.wb-rule-gold-spindle::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.85;
}
.wb-rule-gold-spindle::before { content: ""; }
.wb-rule-gold-spindle .diamond { width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); }

/* ---------- Selection ---------- */
.wb ::selection { background: var(--wb-gold-300); color: var(--wb-ink); }
.wb-dark ::selection { background: var(--wb-gold); color: var(--wb-green-950); }