/* Tributary Insurance Services: design tokens (v5, Sep 28, 2026).
   Load the fonts in <head>:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap">
   Myriad Pro is the logo typeface only. It is not used for web text. */

:root {
  /* Palette */
  --trib-navy: #202B40; /* Navy. Primary. Headings, footer and dark panels, primary buttons. */
  --trib-slate: #3F5467; /* Slate. Logo color. Button hover and focus ring on light backgrounds. */
  --trib-river: #7DADC6; /* River Blue. Logo color and accent. Accents on Navy. Never text on white. */
  --trib-stone: #75776B; /* Stone. Logo color for INSURANCE. Keep it in the logo. */
  --trib-river-deep: #2F6A8C; /* River Deep. Text links on light backgrounds. */
  --trib-river-tint: #E8F1F6; /* River Tint. Highlight surfaces and callouts. */
  --trib-ink: #1C2433; /* Ink. Body text. */
  --trib-muted: #5B6474; /* Muted. Secondary text, captions, hints. */
  --trib-fog: #C9D3DD; /* Fog. Secondary text on Navy. */
  --trib-line: #D6DDE5; /* Line. Dividers and card borders. */
  --trib-field-border: #7C8697; /* Field Border. Form field borders. */
  --trib-mist: #F4F7FA; /* Mist. Alternate section background. */
  --trib-white: #FFFFFF; /* White. Page background and website header. */
  --trib-error: #B3261E; /* Error. Form errors only. */

  /* Roles */
  --color-bg: var(--trib-white);
  --color-surface: var(--trib-mist);
  --color-surface-accent: var(--trib-river-tint);
  --color-text: var(--trib-ink);
  --color-text-muted: var(--trib-muted);
  --color-heading: var(--trib-navy);
  --color-link: var(--trib-river-deep);
  --color-link-hover: var(--trib-navy);
  --color-border: var(--trib-line);
  --color-field-border: var(--trib-field-border);
  --color-focus: var(--trib-slate);
  --color-error: var(--trib-error);
  --color-btn-primary-bg: var(--trib-navy);
  --color-btn-primary-bg-hover: var(--trib-slate);
  --color-btn-primary-text: var(--trib-white);
  --color-btn-secondary-bg: var(--trib-white);
  --color-btn-secondary-text: var(--trib-navy);
  --color-btn-secondary-border: var(--trib-navy);
  --color-dark-bg: var(--trib-navy);
  --color-dark-text: var(--trib-white);
  --color-dark-text-muted: var(--trib-fog);
  --color-dark-link: var(--trib-river);
  --color-dark-focus: var(--trib-river);
  --color-btn-accent-bg: var(--trib-river);
  --color-btn-accent-bg-hover: var(--trib-river-tint);
  --color-btn-accent-text: var(--trib-navy);

  /* Type */
  --font-heading: "Lato", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Lato", "Helvetica Neue", Arial, sans-serif;
  --fs-h1: 2.75rem; --lh-h1: 3.25rem; --fw-h1: 700; /* 44/52 px desktop. Page title, one per page */
  --fs-h2: var(--trib-fs-h2); --lh-h2: var(--trib-lh-h2); --fw-h2: 700; /* Section titles. Fluid, see --trib-fs-h2 */
  --fs-h3: 1.5rem; --lh-h3: 2rem; --fw-h3: 700; /* 24/32 px desktop. Card and subsection titles */
  --fs-h4: 1.125rem; --lh-h4: 1.625rem; --fw-h4: 700; /* 18/26 px desktop. Small headings, form group titles */
  --fs-body: 1.125rem; --lh-body: 1.75rem; --fw-body: 400; /* 18/28 px desktop. Paragraphs */
  --fs-small: 0.9375rem; --lh-small: 1.375rem; --fw-small: 400; /* 15/22 px desktop. Captions, hints, fine print */
  --fs-eyebrow: 0.8125rem; --lh-eyebrow: 1.125rem; --fw-eyebrow: 700; /* 13/18 px desktop. Labels in capitals, tracked 0.08em */
  --fs-button: 1rem; --lh-button: 1.25rem; --fw-button: 700; /* 16/20 px desktop. Buttons */
  --tracking-eyebrow: 0.08em;
  --measure: 68ch;

  /* Shape and focus */
  --radius-sm: 6px;
  --radius-md: 10px;
  --focus-width: 2px;
  --focus-offset: 2px;

  /* Website type and shape */
  --trib-font-heading: var(--font-body); /* Headings use Lato. */
  --trib-fw-heading: 700; /* Headings H1 to H3 in Lato Bold. */
  --trib-tracking-tight: -0.02em; /* Letter spacing for headings. */
  --trib-fs-display: clamp(2.6rem, 5.4vw, 4.5rem); /* Hero heading, 41.6 to 72 px. */
  --trib-lh-display: 1.05; /* Hero heading line height. */
  --trib-fs-display-sm: clamp(2.2rem, 4.2vw, 3.4rem); /* Smaller display heading, 35.2 to 54.4 px. */
  --trib-fs-h2: clamp(1.85rem, 3.2vw, 2.6rem); /* Section titles, 29.6 to 41.6 px. */
  --trib-lh-h2: 1.12; /* Section title line height. */
  --trib-fs-lead: clamp(1.125rem, 1.6vw, 1.3rem); /* Intro paragraph, 18 to 20.8 px. */
  --trib-radius-lg: 28px; /* Cards and photos. */
  --trib-radius-xl: 40px; /* Large panels and the hero photo. */
  --trib-radius-pill: 999px; /* Buttons and tags. */
  --trib-btn-xl-height: 64px; /* Large hero button height. */
  --trib-fs-button-xl: 1.25rem; /* Large hero button text, 20 px. */
  --trib-lh-button-xl: 1.5rem; /* Large hero button line height. */
  --trib-shadow: color-mix(in srgb, var(--trib-navy) 14%, transparent); /* Soft shadow color, Navy at 14%. */
  --trib-dark-line: var(--trib-slate); /* Dividers on Navy. */
}

@media (max-width: 640px) {
  :root {
    --fs-h1: 2.125rem; --lh-h1: 2.625rem;
    --fs-h3: 1.3125rem; --lh-h3: 1.75rem;
    --fs-body: 1.0625rem; --lh-body: 1.6875rem;
  }
}