/* ==========================================================================
   Mopstar Cleaning — Design Tokens
   Single source of truth for color, type, spacing, radius, shadow.
   ========================================================================== */

:root {
  /* ---- Brand color — pulled from the live site's Elementor kit ---- */
  --color-ink:        #060E62;   /* kit primary — headings, logo, dark bands */
  --color-ink-soft:    #7A7A7A;  /* kit text color — body copy */
  --color-paper:       #FFFFFF;  /* page background */
  --color-paper-dim:   #F6F7FB;  /* section alt background */
  --color-teal:        #E6981F; /* kit secondary — buttons, links, numbers */
  --color-teal-dark:   #C97F14;
  --color-mint:         #FDE4E2; /* soft accent / badges (tint of the accent red) */
  --color-amber:        #E6981F; /* secondary accent — hero/section CTA buttons */
  --color-amber-dark:   #C97F14;
  --color-amber-tint:   #F6D9A6; /* filled suburb chips */
  --color-success:     #61CE70; /* kit accent — checkmarks */
  --color-line:        #E7E7EC; /* hairline borders */
  --color-white:       #FFFFFF;

  /* ---- Semantic aliases ---- */
  --color-bg:          var(--color-paper);
  --color-bg-alt:      var(--color-paper-dim);
  --color-text:        var(--color-ink);
  --color-text-muted:  var(--color-ink-soft);
  --color-accent:      var(--color-teal);
  --color-accent-dark: var(--color-teal-dark);
  --color-border:      var(--color-line);

  /* ---- Type ---- */
  --font-display: "Chivo", "Helvetica Neue", sans-serif;
  --font-secondary: "Roboto Slab", Georgia, serif;
  --font-body:    "Roboto", -apple-system, "Segoe UI", sans-serif;

  --fs-h1: clamp(2rem, 2.5vw + 1.2rem, 2.625rem);   /* kit h1 default: 42px */
  --fs-h2: clamp(1.6rem, 2vw + 1rem, 2.4375rem);      /* kit h2 default: 39px */
  --fs-h3: clamp(1.3rem, 1.2vw + 1rem, 2rem);         /* kit h3 default: 32px */
  --fs-hero: clamp(1.5rem, 5vw + 1.5rem, 2.75rem);    /* homepage hero only — larger than a generic h1 */
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* ---- Spacing scale ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;

  /* ---- Layout ---- */
  --container-max: 1170px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 28px;

  /* ---- Shadow / motion ---- */
  --shadow-card: 0 1px 2px rgba(18,41,43,0.05), 0 10px 26px rgba(18,41,43,0.07);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 160ms;
  --dur-base: 260ms;
}