/* ==========================================================================
   HYGIENE SEPTIC TANK CLEANING — DESIGN TOKENS
   Single source of truth. No page may define its own colors, fonts or scale.
   Brand greens sampled from hygieneseptictankcleaning-logo.jpg; deep navy and
   CTA orange sampled from home-figma-design.jpg hero.
   All documented pairs pass WCAG 2.2 AA — see docs/DESIGN-SYSTEM.md.
   ========================================================================== */

/* ---- Self-hosted variable fonts (subsetted latin, font-display: swap) ---- */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/ManropeVariable.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------------- Color: brand greens (from logo) ---------------- */
  --green-50:  #EEF7EE;
  --green-100: #D9EEDA;
  --green-200: #B6DFB8;
  --green-300: #8CCB8F;
  --green-400: #5FAF62;
  --green-500: #4CAF50;   /* leaf / accent green */
  --green-600: #3E8E41;   /* brand green (logo wordmark) — decorative bg only */
  --green-700: #2E7D32;   /* text-bearing green surfaces (white 5.13:1) */
  --green-800: #1B5E20;   /* dark green — Vision emphasized panel (white 7.87:1) */
  --green-900: #0F3D14;

  /* ---------------- Color: deep navy (hero / headings) ---------------- */
  --navy-700: #1C3A8F;
  --navy-800: #14286E;    /* hero background, headings (on white 13.48:1) */
  --navy-900: #0F1F56;

  /* ---------------- Color: CTA + channel ---------------- */
  --orange-600: #BF4E00;  /* primary CTA bg (white 4.88:1) */
  --orange-500: #E65C00;  /* hover top-light only, never body text bg */
  --wa-600: #0F7A3F;      /* WhatsApp button bg (white 5.42:1) */
  --wa-brand: #25D366;    /* WhatsApp brand green — icon accent only, never text bg */

  /* ---------------- Color: neutrals ---------------- */
  --n-0:   #FFFFFF;
  --n-50:  #F5F7FA;       /* card / section wash */
  --n-100: #E9EDF2;
  --n-200: #D5DBE3;
  --n-300: #B9C2CD;
  --n-400: #93A0AF;
  --n-500: #74818F;
  --n-600: #5B6774;       /* secondary text on white (5.77:1) */
  --n-700: #44505F;       /* body text on white (8.21:1) */
  --n-800: #2B3542;
  --n-900: #171E27;

  /* ---------------- Color: feedback ---------------- */
  --success-700: #2E7D32;
  --warning-700: #8A5A00;
  --error-700:   #B3261E;
  --error-50:    #FDECEA;
  --success-50:  #EEF7EE;

  /* ---------------- Semantic aliases ---------------- */
  --c-bg: var(--n-0);
  --c-bg-wash: var(--n-50);
  --c-text: var(--n-700);
  --c-text-strong: var(--navy-800);
  --c-text-muted: var(--n-600);
  --c-brand: var(--green-600);
  --c-brand-text: var(--green-700);
  --c-on-dark: var(--n-0);
  --c-border: var(--n-200);

  /* ---------------- Typography ----------------
     Display: Manrope (headings, buttons, eyebrows)
     Body:    Inter (paragraphs, forms, nav)
     Scale:   1.25 modular from 16px base                                    */
  --font-display: "Manrope", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;

  --fs-100: 0.75rem;    /* 12 — legal, badges */
  --fs-200: 0.8125rem;  /* 13 — top bar, eyebrow */
  --fs-300: 0.9375rem;  /* 15 — small body, cards */
  --fs-400: 1rem;       /* 16 — body */
  --fs-500: 1.25rem;    /* 20 — lead, h4 */
  --fs-600: 1.5625rem;  /* 25 — h3 */
  --fs-700: 1.953rem;   /* 31 — h2 */
  --fs-800: 2.441rem;   /* 39 — h1 (inner pages) */
  --fs-900: 3.052rem;   /* 49 — hero display */

  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.7;

  --fw-regular: 420;    /* Inter variable */
  --fw-medium: 520;
  --fw-semibold: 640;   /* Manrope semibold */
  --fw-bold: 740;

  --eyebrow-tracking: 0.14em;

  /* ---------------- Spacing (4px grid) ---------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;    --sp-20: 5rem;    --sp-24: 6rem;
  --sp-28: 7rem;    --sp-30: 7.5rem;

  --section-pad-desktop: var(--sp-28);  /* 112px — prototype rhythm */
  --section-pad-mobile: var(--sp-16);   /* 64px */

  /* ---------------- Layout ---------------- */
  --container-max: 73.125rem;  /* 1170px */
  --gutter: 1.5rem;            /* 24px */

  /* ---------------- Radius / elevation / borders ---------------- */
  --r-sm: 4px;    /* buttons, inputs */
  --r-md: 8px;    /* cards, icon tiles */
  --r-lg: 16px;   /* feature media */
  --r-full: 999px;

  --shadow-card: 0 6px 24px rgba(15, 31, 86, 0.08);
  --shadow-card-hover: 0 14px 32px rgba(15, 31, 86, 0.14);
  --shadow-sticky: 0 2px 12px rgba(15, 31, 86, 0.10);

  /* ---------------- Motion ---------------- */
  --dur-fast: 150ms;
  --dur-med: 250ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-med: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}