/* ============================================================
   optimyl.com brand tokens — captured 2026-09-09 from the live
   WordPress/Elementor site (home, Broker Portal Login, Contact Us).
   Use these for the Broker Front Door login + portal so it matches
   the public website the login is linked from.
   ============================================================ */

/* Google Fonts (all three are already served by optimyl.com) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700&family=Open+Sans:wght@400;600;700;800&display=swap');

:root {
    /* ---- Typography ---------------------------------------- */
    --font-heading: 'Montserrat', sans-serif;   /* nav, subheads, buttons, inputs */
    --font-display: 'Open Sans', sans-serif;    /* page hero H1 (60px / 800) */
    --font-body:    'Poppins', sans-serif;      /* body copy 18px / 400-500 */

    --text-hero:      60px;   /* H1 on interior pages, Open Sans 800, white on photo */
    --text-h3:        35px;   /* Montserrat 500, line-height 42px */
    --text-subhead:   26px;   /* Montserrat 500 ("Managing Your Broker Account") */
    --text-nav:       20px;   /* Montserrat 500, black */
    --text-lead:      20px;   /* Montserrat 500, line-height 28px */
    --text-body:      18px;   /* Poppins 500, line-height 1.15 on site; use 1.5 in app */
    --text-body-sm:   16px;   /* Open Sans 400, disclaimers */
    --text-button:    17px;   /* Montserrat 700 (header) / 22px on page CTAs */

    /* ---- Brand colors -------------------------------------- */
    --brand-green:        #4EBC8B;   /* primary CTA (Shop Plans, Broker Login) */
    --brand-navy:         #141A36;   /* Sign-In button, dark CTA */
    --brand-navy-deep:    #000F37;   /* Contact form submit */
    --brand-teal-dark:    #0E435B;   /* accent headings / icons */
    --brand-slate:        #324469;   /* secondary text accent */
    --brand-teal-mid:     #468EA6;   /* tertiary accent */
    --brand-blue-link:    #4077B0;   /* occasional link accent */
    --brand-pink:         #CC3366;   /* WordPress default link color — do NOT reuse */

    /* ---- Neutrals ------------------------------------------ */
    --text-primary:   #333333;   /* body text */
    --text-dark:      #000000;   /* nav links, footer links, headings on white */
    --text-alt:       #33373D;
    --text-muted:     #808080;
    --text-light:     #C2C2C2;   /* form ID / fine print */
    --border-input:   #69727D;   /* 1px solid on inputs */
    --surface-alt:    #EEEEEE;   /* footer + alternating section bg */
    --surface-gray:   #D9D9D9;
    --white:          #FFFFFF;
    --hero-overlay:   rgba(2, 1, 1, 0.53);   /* at opacity .33 over hero photo */

    /* ---- Shape & elevation --------------------------------- */
    --radius:          0px;                                 /* site is fully square-cornered */
    --shadow-button:   0 6px 5px 0 rgba(0, 0, 0, 0.25);     /* every CTA */
    --header-height:   156px;                               /* desktop header w/ logo */

    /* ---- Buttons ------------------------------------------- */
    --btn-pad-header:  11px 34px;     /* Shop Plans / Sign-In in header */
    --btn-pad-page:    17.6px 61.6px; /* Broker Login CTA */
    --btn-pad-form:    15px 30px;     /* form submit */

    /* ---- Inputs -------------------------------------------- */
    --input-height:    47px;
    --input-pad:       6px 16px;
}

/* Reference components ------------------------------------- */
.ob-btn {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-button);
    text-transform: capitalize;
    color: var(--white);
    background: var(--brand-green);
    border: 0;
    border-radius: var(--radius);
    padding: var(--btn-pad-header);
    box-shadow: var(--shadow-button);
}
.ob-btn--navy { background: var(--brand-navy); }

.ob-input {
    font-family: var(--font-heading);
    font-size: 18px;
    color: var(--text-dark);
    background: var(--white);
    border: 1px solid var(--border-input);
    border-radius: var(--radius);
    padding: var(--input-pad);
    height: var(--input-height);
    width: 100%;
}

.ob-hero-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-hero);
    color: var(--white);
}

/* Logo: https://www.optimyl.com/wp-content/uploads/2022/11/optimyl-benefits-logo.png (313x103) */