@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400..700&family=Outfit:wght@700&display=swap');

@import "nx/nx.css";
@import "nx/nx_privacy_1.css";
@import "demo/demo-home.css";
@import "demo/demo-buttons.css";

:root {
    /*Colors*/
    --primary: var(--p-primary-500);
    --primary-rgb: 56, 90, 220;
    --primary-hover: var(--p-primary-800);
    --accent: #00B9D9;
    --accent-hover: #099FB9;
    --cta: #FD8B6F;
    --cta-hover: #C2664F;

    --p-primary-50:  #e8edfb;
    --p-primary-100: #c5d1f6;
    --p-primary-200: #98b0f0;
    --p-primary-300: #6a8fea;
    --p-primary-400: #4a73e5;
    --p-primary-500: #385ADC;
    --p-primary-600: #314dc2;
    --p-primary-700: #283fa6;
    --p-primary-800: #203480;
    --p-primary-900: #18285e;
    --p-primary-950: #0A1040;

    --secondary: #C6D7DA;

    --body-bg: white;
    --body-text-color: var(--text-dark);
    --body-text-font: 'Figtree';
    --body-text-size: 16px;
    --body-text-weight: 400;

    --bg-dark: var(--p-primary-950);
    --bg-light: #FCFAFB;

    --border-light: #AFBDF1;

    --text-dark: #000;
    --text-medium: #777;

    --text-header-font: 'Outfit';
    --text-header-size: clamp(28px, 2vw + 1rem, 40px);
    --text-header-weight: 700;
    --text-header-color: var(--primary);

    --text-subheader-size: clamp(16px, 2vw, 22px);
    --text-subheader-weight: 600;
    --text-subheader-color: var(--text-dark);
    --text-subheader-font: var(--body-text-font);

    --header-toggle-bg: var(--cta);
    --header-toggle-bg-hover: var(--cta-hover);
    --header-active-color: white;
    --header-main-nav-underline-color: white;

    --footer-border-color: #DDD;

    --savings-office-icon-bg-color: var(--bg-dark);

    --find-steps-active-icon-color: var(--accent);
    --find-results-title-color: var(--text-dark);
    --find-results-subtitle-color: var(--text-dark);
    --find-office-details-title-color: var(--text-dark);
    --find-map-border-color: var(--border-light);
    --find-steps-completed-icon-color: var(--accent);
    --find-steps-complete-check-display: none;
    --find-steps-number-text-color: var(--primary);

    --faq-close-icon-color: var(--accent);
    --faq-contact-radius: 0;
    --faq-contact-img-left-radius: 0;
    --faq-contact-img-wrapper-padding-left: 0;
    --faq-contact-img-overlay-color: var(--primary);
    --faq-contact-info-title-color: var(--text-inverse);
    --faq-contact-info-text-color: var(--text-inverse);
    --faq-image-bg: none;
    --faq-entry-title-opened-color: var(--primary);

    --support-form-label-font: var(--text-header-font);
    --support-form-label-weight: var(--text-header-weight);
    --support-form-label-size: 15px;
    --support-form-required-size: 12px;

    --join-now-required-label-color: var(--text-medium);
    --signup-summary-title-size: 15px;
    --signup-summary-title-color: var(--text-dark);

    --login-form-label-weight: 600;
}