/* ============================================
   CORPORATE DESIGN TOKENS
   Shared CSS custom properties for all corporate pages.
   These tokens are the single source of truth for brand
   colors, spacing, typography, shadows, radii, and easing.
   ============================================ */

:root {

    /* ── Colors ── */
    --corp-primary:         #1b3e71;   /* hero bg, section titles, buttons */
    --corp-primary-dark:    #010c47;   /* category strip bg, dark overlays */
    --corp-primary-deep:    #010c47;   /* footer bottom bg */
    --corp-teal:            #00565c;   /* card titles, teal tip boxes */
    --corp-slate:           #92D6E3;   /* hero subtitles, category icons */
    --corp-lime:            #AFCE67;   /* checkmarks, accents */
    --corp-green-dark:      #2d6a3e;   /* green tip box bg */
    --corp-warning:         #d97706;   /* warning box bg (amber) */
    --corp-card-bg:         #e8eef2;   /* card backgrounds (fp primary) */
    --corp-card-bg-alt:     #e4eaeb;   /* alternate card bg (wwh) */
    --corp-text-dark:       #0d1f3c;   /* body text dark */
    --corp-text-body:       #444;      /* body text */
    --corp-white:           #ffffff;
    --corp-light-bg:        #f5f7f9;   /* light section bg */
    --corp-cta-green:       #AFCE67;   /* nav CTA button bg */
    --corp-cta-green-hover: #9aba54;   /* nav CTA button hover */
    --corp-badge-gold:      #c8a34e;   /* footer badge border/gradient */
    --corp-badge-gold-dark: #a07c30;   /* footer badge gradient end */

    /* ── Container ── */
    --corp-container-max-width: 1400px; /* main content container max-width */
    --corp-container-px:        15px;   /* container horizontal padding (gutter) */

    /* ── Spacing ── */
    --corp-section-py:          56px;   /* section vertical padding */
    --corp-section-py-tablet:   48px;
    --corp-section-py-mobile:   36px;
    --corp-hero-pt:             180px;  /* hero padding-top — sized to clear the 160px absolutely-positioned logo */
    --corp-hero-pb:             70px;   /* hero padding-bottom */
    --corp-hero-min-height:     750px;  /* hero section min-height — sized to match image-side hero (pt 180 + img 500 + pb 70) so every hero renders at the same height regardless of copy length */
    --corp-strip-bottom:        -52px;  /* category strip bottom offset */

    /* ── Typography ── */
    --corp-font-hero-title:             3.4rem;
    --corp-font-hero-title-tablet:      2.25rem;
    --corp-font-hero-title-mobile:      1.85rem;
    --corp-font-section-title:          3.4rem;
    --corp-font-section-title-tablet:   2.25rem;
    --corp-font-section-title-mobile:   1.75rem;
    --corp-font-subtitle:               1.375rem;
    --corp-font-subtitle-tablet:        1.25rem;
    --corp-font-body:                   1.0625rem;
    --corp-font-body-mobile:            0.9375rem;
    --corp-font-small:                  0.875rem;
    --corp-line-height-tight:           1.1;
    --corp-line-height-body:            1.55;

    /* ── Shadows ── */
    --corp-shadow-card:     0 8px 28px rgba(0, 0, 0, 0.12);
    --corp-shadow-strip:    0 12px 40px rgba(0, 0, 0, 0.35);
    --corp-shadow-image:    0 8px 32px rgba(0, 0, 0, 0.1);

    /* ── Border Radius ── */
    --corp-radius-card:         24px;
    --corp-radius-card-tablet:  20px;
    --corp-radius-card-mobile:  16px;
    --corp-radius-image:        14px;
    --corp-radius-image-mobile: 12px;
    --corp-radius-strip:        20px;
    --corp-radius-strip-mobile: 14px;
    --corp-radius-tip:          12px;

    /* ── Easing ── */
    --corp-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Responsive token overrides: Tablet (≤991px) ── */
@media (max-width: 991px) {
    :root {
        --corp-section-py:          var(--corp-section-py-tablet);
        --corp-hero-pt:             140px;
        --corp-hero-pb:             80px;
        --corp-hero-min-height:     600px;
        --corp-font-hero-title:     var(--corp-font-hero-title-tablet);
        --corp-font-section-title:  var(--corp-font-section-title-tablet);
        --corp-font-subtitle:       var(--corp-font-subtitle-tablet);
        --corp-radius-card:         var(--corp-radius-card-tablet);
        --corp-radius-strip:        16px;
    }
}

/* ── Responsive token overrides: Mobile (≤767px) ── */
@media (max-width: 767px) {
    :root {
        --corp-section-py:          var(--corp-section-py-mobile);
        --corp-hero-pt:             110px;
        --corp-hero-pb:             60px;
        --corp-hero-min-height:     500px;
        --corp-font-hero-title:     var(--corp-font-hero-title-mobile);
        --corp-font-section-title:  var(--corp-font-section-title-mobile);
        --corp-font-body:           var(--corp-font-body-mobile);
        --corp-radius-card:         var(--corp-radius-card-mobile);
        --corp-radius-image:        var(--corp-radius-image-mobile);
        --corp-radius-strip:        var(--corp-radius-strip-mobile);
    }
}