/* ==========================================================================
   ABROVO DESIGN SYSTEM — design tokens, typography, base elements, utilities
   Every page loads this file. Change a token here, it changes everywhere.
   ========================================================================== */

:root{
  /* ---- Neutrals ---- */
  --white:#FFFFFF;
  --ink:#12151A;              /* primary text — near-black, not pure black */
  --ink-soft:#3A3F47;
  --muted:#6B7280;
  --muted-2:#9CA3AF;
  --border:#E8E6E1;
  --border-soft:#F1EFEA;
  --surface:#FAF9F6;          /* warm off-white page background */
  --surface-2:#F4F2ED;

  /* ---- Pastel accents (backgrounds — always paired with a "-ink" text color) ---- */
  --mint:#DCF3E7;         --mint-ink:#1F7A50;
  --sage:#E4EDDC;         --sage-ink:#4B6B3E;
  --sky:#DCEBFA;          --sky-ink:#2A6CA8;
  --cream:#FBF3E2;        --cream-ink:#8A6A2A;
  --peach:#FDE7DB;        --peach-ink:#C1603A;
  --yellow:#FBF0C7;       --yellow-ink:#93731A;
  --coral:#FADAD6;        --coral-ink:#C24C3F;
  --lavender:#EDE6F6;     --lavender-ink:#6B4FA0;

  /* Primary brand accent — used sparingly for CTAs, links, focus states */
  --accent:#1F9463;
  --accent-hover:#187B51;
  --accent-soft:var(--mint);

  /* ---- Typography ---- */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* ---- Radius ---- */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-full:999px;

  /* ---- Shadows (soft, layered — never harsh) ---- */
  --shadow-sm:0 1px 2px rgba(18,21,26,0.05), 0 1px 1px rgba(18,21,26,0.03);
  --shadow-md:0 8px 24px -8px rgba(18,21,26,0.10), 0 2px 6px -2px rgba(18,21,26,0.05);
  --shadow-lg:0 24px 48px -16px rgba(18,21,26,0.16), 0 4px 12px -4px rgba(18,21,26,0.06);

  /* ---- Spacing scale (8px base) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --sp-20:80px; --sp-24:96px;

  /* ---- Container ---- */
  --container:1180px;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--font-sans);background:var(--white);color:var(--ink);
  font-size:16px;line-height:1.5;min-height:100vh;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
img{max-width:100%;display:block;}
ul,ol{list-style:none;margin:0;padding:0;}

/* ---- Typography scale ---- */
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-0.02em;color:var(--ink);}
h1{font-size:3rem;line-height:1.08;}
h2{font-size:2rem;line-height:1.15;}
h3{font-size:1.4rem;line-height:1.25;}
h4{font-size:1.1rem;line-height:1.3;}
p{margin:0;color:var(--ink-soft);line-height:1.65;}
.text-muted{color:var(--muted);}
.text-sm{font-size:.85rem;}
.text-xs{font-size:.75rem;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
}
@media(max-width:700px){
  h1{font-size:2.1rem;}
  h2{font-size:1.5rem;}
}

/* ---- Layout ---- */
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.section{padding:var(--sp-20) 0;}
@media(max-width:700px){.section{padding:var(--sp-12) 0;}.container{padding:0 18px;}}

/* ---- Form elements (shared, prevents the invisible-text bug class entirely) ---- */
input,select,textarea{
  width:100%;font-family:var(--font-sans);font-size:.92rem;color:var(--ink);
  background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-sm);
  padding:12px 14px;transition:border-color .15s, box-shadow .15s;
}
input::placeholder,textarea::placeholder{color:var(--muted-2);}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(31,148,99,0.12);
}
label{display:block;font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:6px;}

/* ---- Utility classes ---- */
.flex{display:flex;} .flex-col{display:flex;flex-direction:column;}
.items-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-1{gap:var(--sp-1);} .gap-2{gap:var(--sp-2);} .gap-3{gap:var(--sp-3);}
.gap-4{gap:var(--sp-4);} .gap-6{gap:var(--sp-6);}
.hidden{display:none !important;}
.fade-in{opacity:0;transform:translateY(12px);transition:opacity .5s ease, transform .5s ease;}
.fade-in.in-view{opacity:1;transform:translateY(0);}