/* =====================================================================
   GREEN VENT — Design Tokens
   Colors, typography, spacing, radii, shadows
   ===================================================================== */

/* ---------- Fonts ----------
   Wordmark: Archive (Archive.otf — brand-supplied)
   Headings & body: DM Sans (loaded from Google Fonts; matches brand spec exactly)
*/
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&display=swap");

@font-face {
  font-family: "Archive";
  src: url("fonts/Archive.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Akrobat — full weight family */
@font-face { font-family: "Akrobat"; src: url("fonts/Akrobat-Thin.otf")       format("opentype"); font-weight: 100; font-display: swap; }
@font-face { font-family: "Akrobat"; src: url("fonts/Akrobat-ExtraLight.otf") format("opentype"); font-weight: 200; font-display: swap; }
@font-face { font-family: "Akrobat"; src: url("fonts/Akrobat-Light.otf")      format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Akrobat"; src: url("fonts/Akrobat-Regular.otf")    format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Akrobat"; src: url("fonts/Akrobat-SemiBold.otf")   format("opentype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Akrobat"; src: url("fonts/Akrobat-Bold.otf")       format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Akrobat"; src: url("fonts/Akrobat-ExtraBold.otf")  format("opentype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Akrobat"; src: url("fonts/Akrobat-Black.otf")      format("opentype"); font-weight: 900; font-display: swap; }

:root {
  /* =========================================================
     COLOR PALETTE — strict; never substitute or add greens
     ========================================================= */
  --gv-green:        #237D28;   /* primary CTA, logo, icons, accent  */
  --gv-green-dark:   #1A5C1E;   /* hover, dark accent, dark text     */
  --gv-sage:         #6DB872;   /* soft accent, airflow, secondary   */
  --gv-warm-white:   #F4F1EB;   /* main bg: web, social, blog        */
  --gv-pure-white:   #FFFFFF;   /* Amazon main image, clean product  */
  --gv-charcoal:     #1C1C1C;   /* body text, dark mode text         */

  /* Working neutrals (derived; only for borders/secondary text)      */
  --gv-ink-90:       #1C1C1C;
  --gv-ink-70:       #3A3A3A;
  --gv-ink-50:       #6B6B6B;
  --gv-ink-30:       #B3B0A9;   /* muted on warm white               */
  --gv-ink-15:       #D9D5CC;   /* dividers on warm white            */
  --gv-ink-08:       #EAE6DD;   /* hairline / card border on warm    */

  /* Semantic green tints (transparent — for airflow, soft chips)    */
  --gv-green-08:     rgba(35,125,40,0.08);
  --gv-green-14:     rgba(35,125,40,0.14);
  --gv-green-24:     rgba(35,125,40,0.24);
  --gv-sage-20:      rgba(109,184,114,0.20);
  --gv-sage-40:      rgba(109,184,114,0.40);

  /* =========================================================
     SEMANTIC COLOR ROLES
     ========================================================= */
  --bg:              var(--gv-warm-white);
  --bg-clean:        var(--gv-pure-white);
  --bg-inverse:      var(--gv-green);
  --surface:         var(--gv-pure-white);
  --surface-soft:    #FBF9F5;
  --border:          var(--gv-ink-08);
  --border-strong:   var(--gv-ink-15);
  --fg:              var(--gv-charcoal);
  --fg-muted:        var(--gv-ink-50);
  --fg-on-green:     var(--gv-pure-white);
  --accent:          var(--gv-green);
  --accent-hover:    var(--gv-green-dark);
  --accent-soft:     var(--gv-sage);

  /* =========================================================
     TYPOGRAPHY — families
     ========================================================= */
  --font-wordmark:   "Archive", "Archivo Black", "Archivo", system-ui, sans-serif;
  --font-display:    "Akrobat", "Barlow Condensed", "Oswald", sans-serif;
  --font-sans:       "DM Sans", system-ui, -apple-system, "Segoe UI",
                     Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Type scale */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.18em;

  /* =========================================================
     SPACING
     ========================================================= */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* =========================================================
     RADII
     ========================================================= */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;
  --radius-product: 28px;

  /* =========================================================
     SHADOWS
     ========================================================= */
  --shadow-xs:  0 1px 2px rgba(28,28,28,0.06);
  --shadow-sm:  0 2px 6px rgba(28,28,28,0.06), 0 1px 2px rgba(28,28,28,0.04);
  --shadow-md:  0 6px 18px rgba(28,28,28,0.08), 0 2px 6px rgba(28,28,28,0.05);
  --shadow-lg:  0 16px 40px rgba(28,28,28,0.12), 0 4px 12px rgba(28,28,28,0.06);
  --shadow-green: 0 8px 20px rgba(35,125,40,0.22);

  /* =========================================================
     LAYOUT
     ========================================================= */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;
  --grid-gutter: 24px;
}

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

html {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { margin: 0; }

.gv-wordmark {
  font-family: var(--font-wordmark);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.9;
  color: var(--gv-green);
}

.gv-tagline {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-size: var(--fs-12);
  color: var(--gv-green-dark);
}

.gv-label {
  font-family: var(--font-sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--fs-12);
  color: var(--gv-green-dark);
}

.gv-h1, h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--gv-charcoal);
  text-wrap: balance;
}

.gv-h2, h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--gv-charcoal);
  text-wrap: balance;
}

.gv-h3, h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--gv-charcoal);
}

.gv-h4, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--gv-charcoal);
}

.gv-body, p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--gv-charcoal);
  text-wrap: pretty;
}

.gv-body-lg {
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
}

.gv-small {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.gv-caption {
  font-family: var(--font-sans);
  font-weight: 500;
  text-transform: uppercase;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wider);
  color: var(--fg-muted);
}

.gv-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  color: var(--gv-green);
}

.gv-quote {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--gv-green-dark);
}

a {
  color: var(--gv-green);
  text-decoration-color: var(--gv-sage);
  text-underline-offset: 3px;
}
a:hover { color: var(--gv-green-dark); }