/* =============================================================
   SOLARSHIELD — CSS VARIABLES / DESIGN TOKENS
   variables.css
   Values extracted directly from solarshield.com production CSS
   ============================================================= */
@import url("https://use.typekit.net/ods1fkj.css");

:root {

  /* ─── Brand Colors (exact from solarshield.com CSS) ─── */
  --solarshield-blue: #004D77;
  /* Primary button/accent blue */
  --solarshield-blue-dark: #003859;
  /* Dark blue — headings, hover */
  --solarshield-blue-hover: #003859;
  /* Button hover state */
  --solarshield-blue-link: #004D77;
  /* Link color */

  /* ─── Backgrounds ─── */
  --solarshield-bg-page: #FFFFFF;
  /* Pure white page background */
  --solarshield-bg-white: #FFFFFF;
  /* Pure white — hero left, navbar */
  --solarshield-bg-dark: #1a1818;
  /* Near black — Why SolarShield section */
  --solarshield-bg-card: #E8E5DF;
  /* Card background */
  --solarshield-bg-card-light: #F2F0EB;
  /* Lighter card variant */
  --solarshield-bg-footer: #EFEDE8;
  /* Footer background */
  --solarshield-bg-badge: hsla(47, 20%, 91%, 0.4);
  /* Tab/badge bg from SolarShield */

  /* ─── Text Colors (exact from solarshield.com) ─── */
  --solarshield-text-heading: #003859;
  /* All headings */
  --solarshield-text-dark: #1a1818;
  /* Primary body text */
  --solarshield-text-body: #1a1818;
  /* Body paragraphs */
  --solarshield-text-light: #6B6B6B;
  /* Muted / secondary text */
  --solarshield-text-white: #FFFFFF;
  /* Text on dark sections */
  --solarshield-text-link: #004D77;
  /* Hyperlinks */

  /* ─── Borders & Dividers ─── */
  --solarshield-border-blue: #004D77;
  /* Blue accent border */
  --solarshield-border-light: #D8D5CE;
  /* Light border on cards */
  --solarshield-border-input: #004D77;
  /* Search input border */

  --font-heading: termina, 'Termina', sans-serif;
  --font-primary: 'sofia-pro', 'Sofia Pro', sans-serif;
  --font-condensed: termina, 'Termina', sans-serif;

  /* Font Sizes — exact from solarshield.com production CSS */
  --fs-hero: 4.5rem;
  /* cmp-showCase__title desktop (exact) */
  --fs-hero-tablet: 3rem;
  /* cmp-showCase__title tablet (exact) */
  --fs-hero-mobile: 2rem;
  /* cmp-showCase__title mobile (exact) */
  --fs-section-title: 2.5rem;
  /* pathways_v4__section_heading desktop (exact) */
  --fs-section-title-md: 2rem;
  /* pathways_v4__section_heading tablet (exact) */
  --fs-section-title-sm: 1.75rem;
  /* pathways_v4__section_heading mobile (exact) */
  --fs-card-title: 1.5rem;
  /* pathways_v4__card_subheading (exact) */
  --fs-eyebrow: 1rem;
  /* pathways_v4__card_eyebrow_text (exact) */
  --fs-body: 1rem;
  /* cmp-showCase__description desktop (exact) */
  --fs-body-sm: 0.9375rem;
  /* 15px secondary body */
  --fs-label: 0.875rem;
  /* pathways_v4__tab_text (exact) */
  --fs-nav: 1rem;
  /* Nav link font size (16px) */
  --fs-btn: 0.875rem;
  /* solarshield-hero-btn font-size (exact) */

  /* Font Weights */
  --fw-thin: 100;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Letter Spacing — exact from solarshield.com production CSS */
  --ls-hero: -3.6px;
  /* cmp-showCase__title (exact) */
  --ls-section: -0.125rem;
  /* pathways_v4__section_heading desktop (exact) */
  --ls-eyebrow: 0.0875rem;
  /* pathways_v4__card_eyebrow_text (exact) */
  --ls-tab: 0.05rem;
  /* pathways_v4__tab_text (exact) */
  --ls-btn: 0.02em;
  /* Button letter spacing */

  /* Line Heights — exact from solarshield.com production CSS */
  --lh-hero: 3.5rem;
  /* cmp-showCase__title (exact) */
  --lh-section: 1.1;
  /* pathways_v4__section_heading (exact) */
  --lh-card-title: 1.75rem;
  /* pathways_v4__card_subheading (exact) */
  --lh-body: 1.5;
  /* Standard body */
  --lh-tight: 1.1;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  /* ─── Spacing ─── */
  --space-xs: 0.5rem;
  /* 8px  */
  --space-sm: 1rem;
  /* 16px */
  --space-md: 1.5rem;
  /* 24px */
  --space-lg: 2rem;
  /* 32px */
  --space-xl: 3rem;
  /* 48px */
  --space-2xl: 6rem;
  /* 96px */

  /* Section padding — exact from pathways_v4 CSS */
  --section-py: 3rem;
  /* Standard section vertical padding */
  --section-px: 6.5rem;
  /* pathways_v4 desktop horizontal (exact) */
  --section-px-md: 4rem;
  /* pathways_v4 medium screen (exact) */
  --section-px-sm: 3rem;
  /* pathways_v4 small screen (exact) */
  --section-px-xs: 1.25rem;
  /* pathways_v4 mobile (exact) */

  /* ─── Container ─── */
  --container-max: 100%;
  /* Allow full width so padding is exact */
  --container-px: 1.5rem;
  --container-px-lg: 104px;
  /* Updated per user request */

  /* ─── Navbar ─── */
  --navbar-height: 5.4375rem;
  /* primary-nav height desktop (exact = 87px) */
  --navbar-height-mobile: 3.9375rem;
  /* primary-nav height mobile (exact = 63px) */
  --navbar-bg: var(--solarshield-bg-white);
  --navbar-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);

  /* ─── Buttons — exact from solarshield-hero-btn CSS ─── */
  --btn-bg: var(--solarshield-blue);
  /* solarshield button background */
  --btn-bg-hover: var(--solarshield-blue-dark);
  /* solarshield button hover */
  --btn-color: #ffffff;
  --btn-padding: 0.75rem 1.5rem;
  /* solarshield-hero-btn padding (exact) */
  --btn-radius: 1.5625rem;
  /* solarshield-hero-btn border-radius (exact = 25px) */
  --btn-font-size: 0.875rem;
  /* solarshield-hero-btn font-size (exact = 14px) */
  --btn-font-weight: 600;
  --btn-letter-spacing: 0.05rem;

  /* ─── Cards ─── */
  --card-radius: 8px;
  --card-padding: 2rem;
  --card-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  /* highlight__card shadow (exact) */

  /* ─── Transitions ─── */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-menu: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Z-Indexes ─── */
  --z-dropdown: 900;
  --z-navbar: 1000;
  --z-overlay: 1100;
  --z-mobile-menu: 1200;
  --z-search: 1300;

  /* ─── Shadows ─── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.14);

}