/* =============================================================================
   Master Insurance — design tokens
   Ported verbatim from the design system (tokens/colors.css, typography.css,
   spacing.css). This file is the single source of truth for the brand.

   Brand: Dark Teal #0f5260 (primary) · White (secondary)
          #f2fbfd (tint) · #7fd0de (accent)

   NOTE: the four brand colors are ALSO registered as Elementor Global Colors
   (Site Settings > Global Colors). Elementor writes its globals as
   --e-global-color-*; the bridge at the bottom of this file keeps the two in
   sync so editing a swatch in Elementor updates the whole site.
   ========================================================================== */

:root {
  /* --- Teal ramp — anchored on the brand hues ---------------------------- */
  --teal-50:  #f2fbfd;  /* brand background tint */
  --teal-100: #e2f5f9;
  --teal-200: #c2e9f0;
  --teal-300: #7fd0de;  /* brand accent — light teal */
  --teal-400: #4bb4c6;
  --teal-500: #2591a5;
  --teal-600: #157486;
  --teal-700: #0f5260;  /* brand primary — dark teal */
  --teal-800: #0b414c;
  --teal-900: #072e37;  /* deepest — footer/hover */

  /* --- Cool neutral ramp (teal-tinted grays, never pure gray) ------------ */
  --ink-900: #0a2329;   /* headings */
  --ink-800: #143138;
  --ink-700: #33565e;   /* body text */
  --ink-500: #5b787f;   /* muted / secondary text — WCAG AA on white (4.73) and tint (4.51) */
  --ink-400: #64767b;   /* placeholder — was #8aa4aa at 2.51, failed AA */
  --ink-200: #d4e6ea;   /* borders */
  --ink-100: #e8f2f4;   /* subtle borders / dividers */
  --white:   #ffffff;

  /* --- Semantic status --------------------------------------------------- */
  --success-500: #1a875c;   /* was #1f9d6b at 3.45 */
  --success-50:  #e7f6ef;
  --warning-500: #9d6c12;   /* was #d89419 at 2.57 */
  --warning-50:  #fbf1dc;
  --error-500:   #d14343;   /* was #d64545 at 4.38 */
  --error-50:    #fbe9e9;

  /* --- Semantic aliases -------------------------------------------------- */
  --color-primary:        var(--teal-700);
  --color-primary-hover:  var(--teal-800);
  --color-primary-active: var(--teal-900);
  --color-accent:         var(--teal-300);
  --color-accent-soft:    var(--teal-100);

  --bg-body:        var(--white);
  --bg-tint:        var(--teal-50);
  --bg-primary:     var(--teal-700);
  --surface-card:   var(--white);
  --surface-field:  var(--teal-50);
  --surface-hover:  var(--teal-50);

  --text-heading:     var(--ink-900);
  --text-body:        var(--ink-700);
  --text-muted:       var(--ink-500);
  --text-placeholder: var(--ink-400);
  --text-on-primary:  var(--white);
  --text-on-accent:   var(--teal-900);
  --text-link:        var(--teal-600);
  --text-link-hover:  var(--teal-800);

  --border-subtle:  var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong:  var(--teal-300);
  --border-focus:   var(--teal-500);

  /* --- Type -------------------------------------------------------------- */
  --font-display: "Sora", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  60px;

  --leading-tight:   1.12;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.08em;

  /* --- Spacing — 4px base grid ------------------------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* --- Radii — brand calls for ~12px rounded cards ----------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;   /* default card radius */
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* --- Shadows — flat/subtle only, no heavy drops ------------------------ */
  --shadow-none:  none;
  --shadow-xs:    0 1px 2px rgba(10, 35, 41, 0.05);
  --shadow-sm:    0 2px 8px rgba(10, 35, 41, 0.06);
  --shadow-md:    0 6px 20px rgba(10, 35, 41, 0.07);
  --shadow-modal: 0 24px 60px rgba(7, 46, 55, 0.28);
  --shadow-focus: 0 0 0 3px rgba(75, 180, 198, 0.35);

  /* --- Layout ------------------------------------------------------------ */
  /* FULL-WIDTH LAYOUT. The site spans the viewport; --container-pad supplies
     the side gutters. Long-form text blocks keep their own max-width so the
     measure stays readable on a wide desktop. */
  --container-max: 100%;
  --container-pad: clamp(20px, 3.5vw, 72px);
  --navbar-height: 76px;
  --section-pad:   84px;

  /* --- Motion — quick and calm, no bounce -------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur-med:  220ms;
}

/* =============================================================================
   Elementor Global Colors bridge
   -----------------------------------------------------------------------------
   Elementor stores globals as --e-global-color-<id>. The kit shipped in
   elementor-kit/kit-settings.json registers the brand palette with these exact
   ids, so a widget set to "Primary" and a hand-written rule using
   var(--color-primary) resolve to the same value.

   Direction matters: Elementor is the AUTHORITY. When the client changes the
   Primary swatch in Site Settings, --e-global-color-primary changes and the
   design-system alias follows it. That is what keeps the site editable.
   ========================================================================== */

:root {
  --color-primary: var(--e-global-color-primary, #0f5260);
  --color-accent:  var(--e-global-color-accent,  #7fd0de);
  --text-body:     var(--e-global-color-text,    #33565e);
  --bg-tint:       var(--e-global-color-mi_tint, #f2fbfd);
  --text-heading:  var(--e-global-color-mi_heading, #0a2329);
}


/* =============================================================================
   Fluid scale — responsive on every device, not just at two breakpoints
   -----------------------------------------------------------------------------
   The scale above is the design system's fixed desktop scale. Breakpoints alone
   left a 60px hero headline at 60px on a phone until an exact media query
   caught it, and produced visible cliffs at 1024 and 767 on the sizes in
   between (laptop vs desktop vs tablet).

   Redefining the large steps with clamp() makes type and rhythm scale
   continuously between a phone and a wide desktop. Small text stays fixed —
   body copy should not shrink on a phone, it should stay readable.

   min ...... comfortable on a 360px phone
   preferred  viewport-relative, so it tracks the device
   max ...... the design system's original desktop value
   ========================================================================== */

:root {
  --text-5xl: clamp(36px, 5.6vw, 60px);   /* hero h1 */
  --text-4xl: clamp(30px, 4.6vw, 48px);   /* page h1 */
  --text-3xl: clamp(26px, 3.6vw, 38px);   /* section h2 */
  --text-2xl: clamp(22px, 2.8vw, 30px);   /* sub-section h2 */
  --text-xl:  clamp(19px, 2.1vw, 24px);   /* h3, testimonial quote */
  --text-lg:  clamp(17px, 1.6vw, 20px);   /* card titles, hero sub */
  --text-md:  clamp(16px, 1.2vw, 18px);   /* lead paragraphs */

  /* --text-base, --text-sm, --text-xs stay fixed: shrinking body copy on a
     phone hurts readability rather than helping it. */

  /* Section rhythm scales with the viewport too. */
  --section-pad: clamp(44px, 6.5vw, 84px);
}


/* =============================================================================
   Contrast guardrails
   -----------------------------------------------------------------------------
   A WCAG 2.1 audit of the palette as actually used found eight failures. The
   token values above are corrected; these two rules cover the cases where the
   failure came from a COMBINATION rather than a single token.

   The worst was white text on the accent teal at 1.75:1 — barely legible. The
   accent is a background colour, never a text colour on light surfaces.
   ========================================================================== */

/* Accent-filled surfaces always take the deep-teal ink, never white. */
.mi-btn--accent,
.mi-badge--accent,
.elementor-widget-button.mi-btn--accent .elementor-button { color: var(--text-on-accent); }

/* Decorative star ratings keep the warm hue but at an accessible weight. */
.mi-rating .mi-i { background-color: var(--warning-500); }