/* ============================================================
   Cumulus Insurance — Color + Type Foundations
   Reskinned from QBE prototype, May 2026.
   Brand source: "- Cumulus Branding External" zip.
   ============================================================ */

/* -------- Fonts -------- */
/* Cumulus uses Raleway as the primary typeface. Local TTFs are bundled
   in assets/fonts/ from the Cumulus brand zip. */
@font-face {
  font-family: "Raleway";
  src: url("assets/fonts/Raleway-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("assets/fonts/Raleway-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("assets/fonts/Raleway-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("assets/fonts/Raleway-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------
     BRAND PALETTE — five-swatch Cumulus palette
     ------------------------------------------------------------ */

  /* Primary brand blue — used for nav, footer, headers, link colour. */
  --cumulus-blue:        rgb(42, 148, 214);   /* #2A94D6 — primary brand */
  --cumulus-blue-hover:  rgb(31, 130, 195);   /* darker for hover */
  --cumulus-blue-deep:   rgb(20, 100, 165);   /* darker variant for nav/footer */

  /* Light blue — accent / illustrations / cloud watermark */
  --cumulus-sky:         rgb(71, 180, 234);   /* #47B4EA */
  --cumulus-sky-soft:    rgba(71, 180, 234, 0.15);

  /* Green — primary CTA colour ("Submit", "Get a quote", "Save"). */
  --cumulus-green:       rgb(0, 172, 91);     /* #00AC5B */
  --cumulus-green-hover: rgb(0, 152, 80);     /* slightly darker on hover */
  --cumulus-green-soft:  rgba(0, 172, 91, 0.12);

  /* Charcoal — body ink */
  --cumulus-ink:         rgb(79, 79, 79);     /* #4F4F4F */
  --cumulus-ink-strong:  rgb(45, 45, 45);     /* slightly stronger for headings */

  /* Light grey — section tint, hairlines */
  --cumulus-grey:        rgb(239, 239, 239);  /* #EFEFEF */

  /* Status / utility */
  --cumulus-red:         rgb(207, 27, 43);    /* #CF1B2B — destructive */
  --cumulus-amber:       rgb(245, 166, 35);   /* alerts/warnings (matches Cumulus accent stripe) */

  /* ------------------------------------------------------------
     NEUTRALS
     ------------------------------------------------------------ */
  --cumulus-black:       rgb(0, 0, 0);
  --cumulus-ink-2:       rgb(60, 60, 60);
  --cumulus-ink-3:       rgb(75, 75, 75);
  --cumulus-ink-4:       rgb(90, 90, 90);
  --cumulus-gray-600:    rgb(140, 140, 140);
  --cumulus-gray-500:    rgb(160, 165, 175);
  --cumulus-gray-400:    rgb(196, 196, 196);
  --cumulus-gray-300:    rgb(214, 214, 214);
  --cumulus-gray-250:    rgb(222, 222, 222);
  --cumulus-gray-200:    rgb(228, 230, 233);  /* card borders, hairlines */
  --cumulus-gray-150:    rgb(237, 238, 240);
  --cumulus-gray-100:    rgb(243, 244, 246);  /* subnav band */
  --cumulus-gray-50:     rgb(247, 248, 249);  /* page section tint */
  --cumulus-white:       rgb(255, 255, 255);

  /* Alpha overlays for hero gradients */
  --cumulus-overlay-dark: rgba(20, 60, 100, 0.78);
  --cumulus-overlay-mid:  rgba(20, 60, 100, 0.45);
  --cumulus-overlay-soft: rgba(0, 0, 0, 0.16);

  /* ------------------------------------------------------------
     SEMANTIC TOKENS
     ------------------------------------------------------------ */

  /* Foregrounds */
  --fg-default:          var(--cumulus-ink);
  --fg-strong:           var(--cumulus-ink-strong);
  --fg-muted:            var(--cumulus-gray-600);
  --fg-inverse:          var(--cumulus-white);
  --fg-link:             var(--cumulus-blue);
  --fg-link-hover:       var(--cumulus-blue-hover);
  --fg-on-brand:         var(--cumulus-white);

  /* Backgrounds */
  --bg-canvas:           var(--cumulus-white);
  --bg-subtle:           var(--cumulus-grey);          /* alt section band — true Cumulus #EFEFEF */
  --bg-muted:            var(--cumulus-gray-100);
  --bg-inverse:          var(--cumulus-blue);          /* footer/nav: brand blue, not navy */
  --bg-inverse-deep:     var(--cumulus-blue-deep);
  --bg-alert:            var(--cumulus-ink-strong);    /* top alert strip: charcoal not pitch black */

  /* Borders */
  --border-default:      var(--cumulus-gray-200);
  --border-strong:       var(--cumulus-gray-500);

  /* Accents — replacing QBE's asymmetric BR radius motif with diagonal stripes.
     The diagonal stripes are rendered in CSS (.cumulus-stripe-corner) using
     these colours. */
  --accent-stripe:       var(--cumulus-sky);           /* card top stripe */
  --accent-stripe-2:     var(--cumulus-green);         /* secondary stripe colour */
  --accent-heritage:     var(--cumulus-blue);          /* cloud mark colour */

  /* Diagonal stripe corner motif — drawn as ::after on hero blocks/cards */
  --stripe-blue:         var(--cumulus-sky);
  --stripe-green:        var(--cumulus-green);
  --stripe-amber:        var(--cumulus-amber);
  --stripe-thickness:    14px;
  --stripe-gap:          6px;

  /* Actions — green is primary, blue is secondary (per Cumulus emails) */
  --action-primary-bg:       var(--cumulus-green);
  --action-primary-fg:       var(--cumulus-white);
  --action-primary-bg-hover: var(--cumulus-green-hover);

  --action-cta-bg:       var(--cumulus-green);          /* same as primary now */
  --action-cta-fg:       var(--cumulus-white);

  --action-secondary-bg: var(--cumulus-blue);
  --action-secondary-fg: var(--cumulus-white);
  --action-secondary-bg-hover: var(--cumulus-blue-hover);
  --action-secondary-border: var(--cumulus-white);

  /* Status */
  --status-error:        var(--cumulus-red);
  --status-info:         var(--cumulus-blue);
  --status-warn:         var(--cumulus-amber);

  /* ------------------------------------------------------------
     TYPE — Family, weights, scale
     ------------------------------------------------------------ */

  --ff-sans: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --ff-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Liberation Mono", monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Scale — kept identical to QBE prototype to preserve layout */
  --fs-hero:      44px;
  --fs-display:   32px;
  --fs-h3:        24px;
  --fs-h4:        20px;
  --fs-h5:        18px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-meta:      12px;
  --fs-micro:     10px;

  /* Line heights — Raleway runs slightly taller than Inter, +1px on body */
  --lh-hero:      54px;
  --lh-display:   40px;
  --lh-h3:        34px;
  --lh-h4:        26px;
  --lh-body:      26px;
  --lh-body-sm:   22px;
  --lh-tight:     20px;
  --lh-meta:      19.6px;

  /* Letter-spacing — Raleway looks better with slightly tighter tracking */
  --ls-heading-tight:  -0.2px;
  --ls-heading-normal: 0px;
  --ls-body:           0.05px;
  --ls-button:         0.3px;
  --ls-meta:           0.3px;

  /* ------------------------------------------------------------
     RADII / SHADOWS / SPACING
     ------------------------------------------------------------ */

  /* Cumulus does NOT use the QBE asymmetric BR radius. Cards are
     gently rounded squares; the diagonal stripe motif (rendered via
     ::after on hero blocks) is the brand signature instead. */
  --radius-card-br:       8px;    /* product cards (was 32px asymmetric BR) */
  --radius-section-br:    12px;   /* hero photo (was 64px asymmetric BR) */
  --radius-section-br-l:  16px;   /* hero/main block (was 96px asymmetric BR) */
  --radius-pill:          50px;   /* button/link pills — Cumulus uses pill CTAs */
  --radius-sm:            4px;
  --radius-badge:         10px;

  /* Shadows */
  --shadow-none:          none;
  --shadow-card:          0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-raised:        0 4px 12px rgba(42, 148, 214, 0.10);
  --shadow-menu:          0 12px 24px rgba(42, 148, 214, 0.14);

  /* Spacing scale — unchanged */
  --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-15: 60px;
  --space-20: 80px;
  --space-25: 100px;

  /* Layout */
  --container-max:   1140px;
  --gutter:          390px;
  --accent-ribbon-w: 0px;       /* no orange ribbon — Cumulus doesn't have one */

  --nav-height:    60px;
  --alert-height:  48.5px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html, body {
  font-family: var(--ff-sans);
  color: var(--fg-default);
  background: var(--bg-canvas);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .qbe-h1 {
  font-family: var(--ff-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-heading-tight);
  color: var(--fg-strong);
  margin: 0;
}

h2, .qbe-h2 {
  font-family: var(--ff-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-heading-tight);
  color: var(--fg-strong);
  margin: 0;
}

h3, .qbe-h3 {
  font-family: var(--ff-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h5);
  line-height: 24px;
  letter-spacing: 0;
  color: var(--fg-strong);
  margin: 0;
}

h4, .qbe-h4 {
  font-family: var(--ff-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: 0.2px;
  color: var(--fg-strong);
  margin: 0;
}

p, .qbe-body {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body);
  color: var(--fg-default);
  margin: 0;
}

.qbe-body-lg {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-heading-tight);
}

.qbe-meta {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  letter-spacing: var(--ls-meta);
  color: var(--fg-default);
}

.qbe-eyebrow {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  line-height: 16.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--cumulus-blue);
}

a, .qbe-link {
  color: var(--fg-link);
  text-decoration: none;
  font-weight: var(--fw-semibold);
}
a:hover, .qbe-link:hover {
  color: var(--fg-link-hover);
  text-decoration: underline;
}

/* --- Buttons — Cumulus pill style. Green is primary, blue is secondary. --- */
.qbe-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  line-height: 25px;
  letter-spacing: var(--ls-button);
  border-radius: var(--radius-pill);
  padding: 12px 28px;
  border: 0;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, opacity 120ms ease, transform 120ms ease;
}
.qbe-btn--primary {
  background: var(--action-primary-bg);
  color: var(--action-primary-fg);
}
.qbe-btn--primary:hover { background: var(--action-primary-bg-hover); }

.qbe-btn--cta {
  background: var(--action-cta-bg);
  color: var(--action-cta-fg);
  font-weight: var(--fw-semibold);
}
.qbe-btn--cta:hover { filter: brightness(0.95); }

.qbe-btn--secondary {
  background: var(--action-secondary-bg);
  color: var(--action-secondary-fg);
  border: 0;
}
.qbe-btn--secondary:hover { background: var(--action-secondary-bg-hover); }

.qbe-btn--outline {
  background: transparent;
  color: var(--cumulus-blue);
  border: 1.5px solid var(--cumulus-blue);
}
.qbe-btn--outline:hover { background: var(--cumulus-blue); color: var(--cumulus-white); }

.qbe-btn--sm { padding: 8px 16px; font-size: var(--fs-body-sm); line-height: 20px; }

/* --- Card: Cumulus product card. Flat white, hairline border, light
       sky-blue top stripe (replaces QBE's cyan stripe), gentle 8px corners,
       optional diagonal stripe corner via .cumulus-stripe-corner --- */
.qbe-card {
  position: relative;
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card-br);
  overflow: hidden;
}
.qbe-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--accent-stripe);
}

/* --- Diagonal stripe corner motif (replaces QBE asymmetric BR radius) ---
   Add .cumulus-stripe-corner to any block. Two parallel diagonal stripes
   sit in the bottom-left of the block, matching the marketing imagery
   in the Cumulus brand zip (yellow/blue diagonal accent on hero photos). */
.cumulus-stripe-corner {
  position: relative;
  overflow: hidden;
}
.cumulus-stripe-corner::after {
  content: "";
  position: absolute;
  left: -40px;
  bottom: -40px;
  width: 240px;
  height: 240px;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    transparent 0%,
    transparent 38%,
    var(--stripe-blue) 38%,
    var(--stripe-blue) 42%,
    transparent 42%,
    transparent 50%,
    var(--stripe-green) 50%,
    var(--stripe-green) 54%,
    transparent 54%
  );
  z-index: 2;
}

/* Top-right diagonal stripe variant (used on hero blocks) */
.cumulus-stripe-corner--tr::after {
  left: auto;
  right: -40px;
  bottom: auto;
  top: -40px;
  background: linear-gradient(
    -135deg,
    transparent 0%,
    transparent 38%,
    var(--stripe-blue) 38%,
    var(--stripe-blue) 42%,
    transparent 42%,
    transparent 50%,
    var(--stripe-green) 50%,
    var(--stripe-green) 54%,
    transparent 54%
  );
}