/* ============================================================
   Refresh Carpet Cleaning — design tokens
   Source: Design/.../design_handoff_refresh_website/README.md §2
   Values are FINAL per the handoff ("high fidelity, recreate faithfully").

   THIS FILE IS THE DESIGN-SYSTEM SWAP POINT. Nothing else in the build
   should hard-code a colour, size, radius, shadow or duration.
   In the WordPress theme this becomes the top of style.css.
   ============================================================ */

:root {
  /* ---- Colour -------------------------------------------------
     Ratio target: ~70% paper, 20% shamrock, 10% fresh.
     No gradients, no teal, no third hue.                        */
  --green-900: #0B6B3A;   /* Shamrock — headings, primary buttons, dark sections */
  --green-700: #0A5A31;   /* Primary button hover ONLY */
  --green-500: #57B947;   /* Fresh — icon fills, rules, focus ring. DECORATIVE: never text */
  --green-600: #1A6E33;   /* Fresh Text — eyebrows, links, accent text. AA on paper + wash */
  --green-300: #9BE07F;   /* Sprout — highlights on dark ONLY, never text on white */
  --green-50:  #F1F7EE;   /* Wash — alternating section bg, tinted cards */
  --green-100: #E1EEDC;   /* Media placeholder / subtle fill */
  --ink:       #12341F;   /* Body text, headings on light */
  --ink-body:  #3F5344;   /* Body copy (per type scale) */
  --ink-muted: #5A6A5D;   /* Secondary copy */
  --ink-faint: #8B978C;   /* Captions, meta */
  --paper:     #FFFFFF;
  --line:      #E3E8E2;   /* Hairlines */
  --line-input:#D6E5D2;   /* Input borders, outline-button borders */
  --danger:    #B4332B;   /* The only non-green in the system */

  /* On-dark text (shamrock surfaces) */
  --on-dark:        #FFFFFF;
  --on-dark-muted:  #CFE8CB;

  /* ---- Spacing — 4px base ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px;

  /* ---- Radius — "nothing is square" ---- */
  --r-input: 8px; --r-card: 16px; --r-panel: 24px; --r-pill: 999px;

  /* ---- Elevation ----
     Flat + hairline is the default. Never both a shadow and a border. */
  --shadow-sm: 0 2px 8px rgba(18,52,31,0.06);
  --shadow-lg: 0 12px 32px rgba(18,52,31,0.12);

  /* ---- Layout ---- */
  --container: 1180px;
  --gutter: 24px;
  --section-y: 96px;      /* 56px below 640 */
  --measure: 56ch;        /* body copy cap */

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 160ms;        /* colour transitions */
  --t-base: 200ms;        /* card lift */

  /* ---- Type scale (see base.css for application) ---- */
  --font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: 64px;     /* 44px < 900, 36px < 640 */
  --fs-h2: 38px;          /* 30px < 640 */
  --fs-h3: 22px;
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-eyebrow: 12px;
  --fs-button: 16px;
  --fs-nav: 15px;
}

@media (max-width: 640px) {
  :root { --section-y: 56px; }
}