/* ============================================================
   SOVITAE / VESTA — Color & Type Foundations
   Source of truth: Sovitae-dummy.fig → SOVITAE-WEB / VESTA_WEB_A
   ------------------------------------------------------------
   Sovitae is the parent brand; VESTA is its flagship product —
   a microbial biostimulant for soil & root health, sold to
   farmers. The visual language is editorial, warm and
   produce-forward: a cream "paper" canvas, a deep wine primary,
   and saturated accent fields (yellow, green, sky, blush).
   ============================================================ */

/* ---- Webfonts (Google Fonts) -------------------------------
   Instrument Serif + Darker Grotesque are the two — and only —
   brand faces, both on Google Fonts. Objectivity (used sparingly
   in source) is NOT on Google Fonts; Darker Grotesque stands in
   for it, so every label/body across the system is one of the
   two real faces. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Darker+Grotesque:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ---------------------------------------------------------
     CORE BRAND COLORS
     The FOUR "attention" colors below are used full-strength for
     header / text-block backgrounds. Each has a soft "muted"
     partner (see SURFACE TINTS) for the associated secondary /
     body text blocks.
     --------------------------------------------------------- */
  --wine:        #5F0138; /* rgb(95,1,56)    attention 1 · primary, footer, CTAs */
  --green:       #337229; /* rgb(51,114,41)  attention 2 · growth / "how we work" */
  --yellow:      #FFD000; /* rgb(255,208,0)  attention 3 · hero field, highlight */
  --orange:      #FB6D00; /* rgb(251,109,0)  attention 4 · warm header / callout */

  --paper:       #FAEFE0; /* rgb(250,239,224) default page canvas */
  --ink:         #1E1E1E; /* rgb(30,30,30)   near-black body on light */
  --black:       #000000; /* rgb(0,0,0)      hero panel, hard edges */
  --white:       #FFFFFF;

  /* ---------------------------------------------------------
     SURFACE TINTS  (full-bleed section backgrounds)
     The four MUTED partners (one per attention color) carry the
     secondary / body copy of a block. Plus a standalone sky tint.
          wine   → blush        green  → sage
          yellow → pale-yellow  orange → peach
     --------------------------------------------------------- */
  --blush:       #FFDADE; /* rgb(255,218,222) muted WINE   — strawberry card */
  --sage:        #EDEFD6; /* rgb(237,239,214) muted GREEN  — "how we work" */
  --peach:       #FFE3CC; /* rgb(255,227,204) muted ORANGE — warm body block */
  --sky:         #E4EDF9; /* rgb(228,237,249) standalone tint — testimonials */
  --olive:       #EDEFD6; /* alias of sage for product card */
  /* (yellow's muted partner is --pale-yellow #FFF0AB, see below) */

  /* ---------------------------------------------------------
     ACCENT / TEXT-ON-DARK COLORS
     --------------------------------------------------------- */
  --navy:        #102B3F; /* rgb(16,43,63)   serif heading on sky */
  --lavender:    #E2C2E5; /* rgb(226,194,229) wordmark + text on wine */
  --pale-yellow: #FFF0AB; /* rgb(255,240,171) muted YELLOW — wordmark/nav on black */
  --strawberry:  #970000; /* rgb(151,0,0)    deep red text on blush */
  --rust:        #8F3A00; /* rgb(143,58,0)   deep orange text on peach */
  --sand:        #E6D9D1; /* rgb(230,217,209) muted text on wine */
  --citron:      #EDEDAD; /* rgb(237,237,173) social marks on wine */

  /* ---------------------------------------------------------
     SEMANTIC ROLES
     --------------------------------------------------------- */
  --bg:           var(--paper);
  --fg:           var(--ink);
  --fg-muted:     #6b5f57;
  --brand:        var(--wine);
  --on-brand:     var(--lavender);
  --hairline:     rgba(30,30,30,0.55); /* 1px outline buttons/inputs */
  --hairline-soft:rgba(30,30,30,0.18);

  /* ---------------------------------------------------------
     TYPE FAMILIES
     --------------------------------------------------------- */
  --font-display:   'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-grotesque: 'Darker Grotesque', system-ui, sans-serif; /* labels + body */
  --font-sans:      'Darker Grotesque', system-ui, sans-serif; /* utility / fine print — same face */

  /* ---------------------------------------------------------
     TYPE SCALE  (px values mirror the Figma frame, fluid-capped)
     Display = Instrument Serif. Labels/body = Darker Grotesque.
     --------------------------------------------------------- */
  --display-xl: 400 100px/1.0   var(--font-display); /* hero of a section */
  --display-lg: 400 72px/1.05   var(--font-display);
  --display-md: 400 52px/1.1    var(--font-display);
  --display-sm: 400 36px/1.15   var(--font-display);

  --eyebrow:    700 20px/1.0    var(--font-grotesque); /* OUR MISSION */
  --label-lg:   700 28px/1.1    var(--font-grotesque); /* footer col heads */
  --button:     700 21px/1.0    var(--font-grotesque);

  --body-lg:    500 22px/1.3    var(--font-grotesque);
  --body:       500 18px/1.3    var(--font-grotesque);
  --caption:    500 14px/1.4    var(--font-sans);

  --tracking-label: 0.05em; /* uppercase labels & nav */
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.s-display-xl { font: var(--display-xl); letter-spacing: -0.01em; }
.s-display-lg { font: var(--display-lg); letter-spacing: -0.01em; }
.s-display-md { font: var(--display-md); }
.s-display-sm { font: var(--display-sm); }

.s-eyebrow {
  font: var(--eyebrow);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.s-label-lg {
  font: var(--label-lg);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.s-body-lg { font: var(--body-lg); }
.s-body    { font: var(--body); }
.s-caption { font: var(--caption); }

/* Buttons share a single label style */
.s-button {
  font: var(--button);
  letter-spacing: 0.01em;
}