/* =====================================================================
   HomezGuard Pest Management — Design Tokens
   Source of truth for colours, type, spacing, radii, shadows.
   Imported by every preview card and every UI kit in this project.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  /* ----- Brand colours ----- */
  --c-forest:        #0F4B38;   /* primary brand green — the H of the monogram */
  --c-forest-700:    #0B3A2C;   /* deeper forest for hover / pressed states  */
  --c-forest-300:    #4A7869;   /* tinted forest for disabled / muted accents */
  --c-forest-50:     #E7EDEB;   /* forest wash — section bands               */

  --c-graphite:      #1E1F22;   /* near-black body — the G of the monogram   */
  --c-graphite-700:  #34363A;   /* secondary text                            */
  --c-graphite-500:  #6B6E74;   /* tertiary text, meta                       */
  --c-graphite-300:  #B7B9BD;   /* placeholder / disabled                    */
  --c-graphite-100:  #E5E6E8;   /* hairlines / dividers                      */

  --c-ivory:         #F6F5F2;   /* page background — NEVER pure white        */
  --c-paper:         #FFFFFF;   /* card surface (rare, intentional)          */

  --c-brass:         #9A7B3A;   /* accent — seals, certificates, hairlines   */
  --c-brass-50:      #F1ECDF;   /* brass wash — certificate background       */

  /* ----- Semantic ----- */
  --c-text:          var(--c-graphite);
  --c-text-muted:    var(--c-graphite-500);
  --c-text-inverse:  var(--c-ivory);
  --c-bg:            var(--c-ivory);
  --c-bg-elevated:   var(--c-paper);
  --c-bg-dark:       var(--c-graphite);
  --c-bg-brand:      var(--c-forest);
  --c-border:        var(--c-graphite-100);
  --c-border-strong: var(--c-graphite);
  --c-success:       #1F6F4A;
  --c-warning:       #B0791E;
  --c-danger:        #8E2A1F;

  /* ----- Type ----- */
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Modular scale (1.25 — major third), 16px base */
  --fs-12: 0.75rem;     /* 12 — micro labels                 */
  --fs-13: 0.8125rem;   /* 13 — meta, captions               */
  --fs-14: 0.875rem;    /* 14 — small body, UI labels        */
  --fs-16: 1rem;        /* 16 — body                         */
  --fs-18: 1.125rem;    /* 18 — lead paragraph               */
  --fs-20: 1.25rem;     /* 20 — H6 / card title              */
  --fs-24: 1.5rem;      /* 24 — H5                           */
  --fs-28: 1.75rem;     /* 28 — H4                           */
  --fs-32: 2rem;        /* 32 — H3                           */
  --fs-40: 2.5rem;      /* 40 — H2                           */
  --fs-56: 3.5rem;      /* 56 — H1                           */
  --fs-80: 5rem;        /* 80 — Display                      */

  --lh-tight:  1.05;
  --lh-snug:   1.18;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.18em;   /* used on PEST MANAGEMENT-style descriptors */

  /* ----- Spacing (8pt grid; 4 allowed for type micro-adjustments) ----- */
  --s-0:   0;
  --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;
  --s-11:  192px;

  /* ----- Radii ----- */
  --radius-sm:  4px;    /* buttons, inputs, chips */
  --radius-md:  8px;    /* cards, modals          */
  --radius-lg:  16px;   /* feature surfaces, hero */
  --radius-pill: 9999px;/* tag chips only         */

  /* ----- Borders ----- */
  --border-hair:   1px solid var(--c-graphite-100);
  --border-mid:    1px solid #1E1F2230;
  --border-strong: 1px solid var(--c-graphite);

  /* ----- Shadows (almost flat) ----- */
  --shadow-1: 0 1px 2px rgba(30,31,34,0.06), 0 1px 1px rgba(30,31,34,0.04);
  --shadow-2: 0 12px 32px -16px rgba(30,31,34,0.18);

  /* ----- Motion ----- */
  --ease-standard: cubic-bezier(.2,.7,.2,1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* ----- Layout ----- */
  --container-max: 1200px;
  --gutter:        var(--s-5);
}

/* ---------- Base reset / page defaults ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Type primitives ---------- */
.hg-display   { font-size: var(--fs-80); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 800; }
.hg-h1        { font-size: var(--fs-56); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 700; }
.hg-h2        { font-size: var(--fs-40); line-height: var(--lh-snug);  letter-spacing: var(--tracking-tight); font-weight: 700; }
.hg-h3        { font-size: var(--fs-32); line-height: var(--lh-snug);  font-weight: 700; }
.hg-h4        { font-size: var(--fs-28); line-height: var(--lh-snug);  font-weight: 600; }
.hg-h5        { font-size: var(--fs-24); line-height: var(--lh-snug);  font-weight: 600; }
.hg-h6        { font-size: var(--fs-20); line-height: var(--lh-snug);  font-weight: 600; }
.hg-lead      { font-size: var(--fs-18); line-height: var(--lh-loose); color: var(--c-graphite-700); }
.hg-body      { font-size: var(--fs-16); line-height: var(--lh-normal); }
.hg-meta      { font-size: var(--fs-13); line-height: var(--lh-normal); color: var(--c-text-muted); }
.hg-eyebrow   { font-size: var(--fs-12); line-height: 1; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: 600; color: var(--c-graphite-500); }

/* The signature flanking-hairlines descriptor pattern from the logo */
.hg-descriptor {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-graphite);
}
.hg-descriptor::before,
.hg-descriptor::after {
  content: ""; height: 1px; width: 24px; background: var(--c-graphite);
}

/* ---------- Surfaces ---------- */
.hg-surface       { background: var(--c-bg); }
.hg-surface-paper { background: var(--c-paper); border: var(--border-hair); border-radius: var(--radius-md); }
.hg-surface-dark  { background: var(--c-graphite); color: var(--c-text-inverse); }
.hg-surface-brand { background: var(--c-forest);   color: var(--c-text-inverse); }

/* ---------- Buttons ---------- */
.hg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  height: 44px;
  padding: 0 var(--s-5);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard),
              color      var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
  text-decoration: none;
}
.hg-btn--primary   { background: var(--c-forest);  color: var(--c-ivory); }
.hg-btn--primary:hover { background: var(--c-forest-700); }
.hg-btn--secondary { background: transparent; color: var(--c-graphite); border-color: var(--c-graphite); }
.hg-btn--secondary:hover { background: var(--c-graphite); color: var(--c-ivory); }
.hg-btn--ghost     { background: transparent; color: var(--c-graphite); }
.hg-btn--ghost:hover { color: var(--c-forest); }
.hg-btn--sm { height: 36px; padding: 0 var(--s-4); font-size: var(--fs-13); }
.hg-btn--lg { height: 52px; padding: 0 var(--s-6); font-size: var(--fs-16); }
.hg-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---------- Inputs ---------- */
.hg-field { display: flex; flex-direction: column; gap: var(--s-2); }
.hg-field__label { font-size: var(--fs-13); font-weight: 600; color: var(--c-graphite); }
.hg-field__hint  { font-size: var(--fs-12); color: var(--c-text-muted); }
.hg-input, .hg-select, .hg-textarea {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  color: var(--c-graphite);
  background: var(--c-paper);
  border: 1px solid var(--c-graphite-100);
  border-radius: var(--radius-sm);
  height: 44px;
  padding: 0 var(--s-3);
  transition: border-color var(--dur-base) var(--ease-standard);
}
.hg-textarea { height: auto; padding: var(--s-3); min-height: 96px; line-height: var(--lh-normal); }
.hg-input:focus, .hg-select:focus, .hg-textarea:focus {
  outline: none; border-color: var(--c-forest);
}
.hg-input::placeholder, .hg-textarea::placeholder { color: var(--c-graphite-300); }

/* ---------- Chips / Tags ---------- */
.hg-chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-12);
  font-weight: 600;
  height: 24px;
  padding: 0 var(--s-3);
  border-radius: var(--radius-pill);
  background: var(--c-graphite-100);
  color: var(--c-graphite);
  letter-spacing: 0.02em;
}
.hg-chip--brand   { background: var(--c-forest-50); color: var(--c-forest); }
.hg-chip--brass   { background: var(--c-brass-50);  color: var(--c-brass); }
.hg-chip--outline { background: transparent; border: 1px solid var(--c-graphite-100); }

/* ---------- Card ---------- */
.hg-card {
  background: var(--c-paper);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  padding: var(--s-6);
}

/* ---------- Hairline divider ---------- */
.hg-divider { height: 1px; background: var(--c-graphite-100); border: 0; }

/* ---------- Utilities ---------- */
.hg-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.hg-stack > * + * { margin-top: var(--s-4); }
.hg-stack-lg > * + * { margin-top: var(--s-6); }