/* CSS for Broadcom fonts, buttons, links */

/* NOTE: when adding styles be sure to use variables as the styles will change someday */

/* VARIABLES */
/* ================================================================================ */

@import "fonts/inter.css";

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

body {
    --color-primary: hsl(348, 92%, 42%); /* #cc092f; */
    --color-primary--dark: hsl(351, 74%, 37%); /* #a6192e; */
    --color-secondary: hsl(200, 100%, 27%); /* #005C8A; */
    --color-secondary--dark: hsl(191, 100%, 31%); /* #0083a0;	- link and button hover color */

    --color-grey--900: hsl(0, 0%, 20%); /* #333;	-default color for all body copy and non-header text */
    --color-grey--800: hsl(214, 4%, 34%); /* #53565a; - backgrounds and secondary titles */
    --color-grey--700: hsl(0, 0%, 53%); /* #878787; -used for background and secondary title */
    --color-grey--675: hsl(220, 2%, 66%); /* pantone cool gray 6 - #a8a8aa */
    --color-grey--650: hsl(180, 1%, 74%); /*  pantone cool gray 4 - bcbcbc */
    --color-grey--625: hsl(60, 1%, 79%); /* pantone cool gray 3 - #c8c8c8 */
    --color-grey--600: hsl(180, 1%, 92%); /* #e8e9e9;	-used for background, borders, and trim (stripe color) */
    --color-grey--500: hsl(0, 0%, 97%); /* #f6f6f6;	-used for background, borders, and trim (stripe color) */
    --color-white: hsl(0, 0%, 100%); /* #fff; */
    --color-black: hsl(0, 0%, 0%); /* #000; */

    --font-main: "Inter", system-ui, -apple-system, sans-serif;
    --font-family--primary: var(--font-main);
    --font-family--primeBold: var(--font-main);
    --font-family--secondary: var(--font-main);

    --font-size-md: 14px;
    --font-size-lg: 16px;
}


/* END VARIABLES */

/* TOOLS - GLOBAL
============================================================================ */

body {
    color: var(--color-grey--900);
    font-family: var(--font-family--primary);
    font-size: var(--font-size-md);                 /* Standard font size is -lg (16px) but dashboard real estate is limited */
    text-align: left;
}

label, .label, input[type="radio"], input[type="checkbox"], select {
    font-family: var(--font-family--secondary);
    letter-spacing: .25px;
}


:root {
    /* ============================================
   * PRIMITIVE COLORS
   * Base color palette from design system
   * ============================================ */
    /* Transparent */
    --none: #ffffff00;
    /* White */
    --white: #ffffff;
    /* Emerald (Greens) */
    --emerald-100-citrine: #acda09;
    --emerald-200-apple: #8ac332;
    --emerald-300-lime: #61a60e;
    --emerald-400-emerald: #007741;
    /* Gold (Yellows/Oranges) */
    --gold-100: #fdcb3c;
    --gold-200-gold: #f3ba16;
    --gold-300: #f0a715;
    --gold-400-copper: #e68c28;
    --gold-aa-contrast-100-gold: #f3ba16;
    --gold-aa-contrast-200-copper: #e68c28;
    --gold-aa-contrast-300: #dd7908;
    --gold-aa-contrast-400: #c35b05;
    /* Purple Subdued */
    --purple-subdued-100: #ab62db;
    --purple-subdued-200: #8859b7;
    --purple-subdued-300-steel: #6c4b94;
    --purple-subdued-400: #552e7b;
    /* Purple Vibrant */
    --purple-vibrant-100-lilac: #b851e9;
    --purple-vibrant-200-violet: #9945c7;
    --purple-vibrant-300: #6a3397;
    --purple-vibrant-400-amethyst: #4b1e7a;
    /* Red */
    --red-100: #f9365c;
    --red-200: #e01a41;
    --red-300-pulse-red: #cc092f;
    --red-400-crimson: #a6192e;
    /* Sapphire (Blues) */
    --sapphire-100: #66d8ff;
    --sapphire-200-cyan: #2ebeef;
    --sapphire-300-cobalt: #0098c7;
    --sapphire-400: #0075a3;
    --sapphire-500-sapphire: #005c8a;
    /* Slate (Grays) */
    --slate-100: #f5f5f6;
    --slate-200: #e8e8eb;
    --slate-300: #d1d2d7;
    --slate-400: #bbbbc3;
    --slate-500: #757586;
    --slate-600: #494a5e;
    --slate-700: #32344a;
    --slate-800: #272941;
    --slate-900-navy: #1b1d36;
    /* Slate Overlay (with transparency) */
    --slate-overlay-100: #f5f5f699;
    --slate-overlay-200: #e8e8eb33;
    --slate-overlay-300: #d1d2d733;
    --slate-overlay-400: #bbbbc333;
    --slate-overlay-500: #7575864d;
    --slate-overlay-600: #494a5ebf;
    --slate-overlay-700: #32344abf;
    --slate-overlay-800: #272941bf;
    --slate-overlay-900-navy: #1b1d36bf;
    /* Spruce (Teals) */
    --spruce-100-aqua: #00c6c2;
    --spruce-200-turquoise: #00a5ae;
    --spruce-300-jade: #007b8c;
    --spruce-400-spruce: #005a70;
    /* ============================================
   * GRADIENTS
   * Brand gradient definitions
   * ============================================ */
    --gradient-steel-navy: linear-gradient(to right, #6c4b94 0%, #443465 25%, #1b1d36 69.71%);
    --gradient-navy-steel: linear-gradient(to right, #1b1d36 30%, #443465 75%, #6c4b94 100%);
    --gradient-steel-sapphire-lime: linear-gradient(to right, #6c4b94 15%, #36548f 47%, #005c8a 61%, #31814c 83%, #61a60e 100%);
    --gradient-pulse-steel-navy: linear-gradient(to right, #cc092f 4%, #6c4b94 50%, #1b1d36 96%);
    --gradient-navy-steel-pulse: linear-gradient(to right, #1b1d36 4%, #6c4b94 50%, #cc092f 96%);
    --gradient-pulse-steel-cobalt: linear-gradient(to right, #cc092f 0%, #9c2a62 15%, #6c4b94 50%, #3672ad 80%, #0098c7 100%);
    --gradient-steel-pulse-gold: linear-gradient(to right, #6c4b94 15%, #9c2a62 45%, #cc092f 65%, #e68c28 90%, #f3ba16 100%);
    --gradient-amethyst-cobalt: linear-gradient(to right, #4b1e7a 0%, #0098c7 100%);
    /* ============================================
   * SEMANTIC TEXT COLORS
   * Contextual text color usage
   * ============================================ */
    --text-body: #494a5e;
    --text-contentblock-title: #32344a;
    --text-main-title: #272941;
    --text-title: #494a5e;
    /* ============================================
   * INTERACTIVE ELEMENTS
   * Focus, highlight, and icon states
   * ============================================ */
    --interactive-focus-border-color: #005c8a;
    --interactive-highlight-background: #f5f5f6;
    /* Icons */
    --interactive-icon-default: #494a5e;
    --interactive-icon-hover: #0075a3;
    --interactive-icon-play-background-color: #32344abf;
    --interactive-icon-play-icon-color: #ffffff;
    /* Links */
    --interactive-link-default-text-color: #005c8a;
    --interactive-link-hover-text-color: #0075a3;
    /* ============================================
   * BUTTONS
   * All button variant styles
   * ============================================ */
    /* General/Default Button */
    --interactive-bttn-general-default-background-color: #494a5e;
    --interactive-bttn-general-default-border-color: transparent;
    --interactive-bttn-general-default-text-color: #ffffff;
    --interactive-bttn-general-disabled-background-color: #bbbbc3;
    --interactive-bttn-general-disabled-border-color: transparent;
    --interactive-bttn-general-disabled-text-color: #494a5e;
    --interactive-bttn-general-hover-background-color: #ffffff;
    --interactive-bttn-general-hover-border-color: #494a5e;
    --interactive-bttn-general-hover-text-color: #494a5e;
    /* Primary Button */
    --interactive-bttn-primary-default-background-color: #005c8a;
    --interactive-bttn-primary-default-border-color: #ffffff;
    --interactive-bttn-primary-default-text-color: #ffffff;
    --interactive-bttn-primary-disabled-background-color: #bbbbc3;
    --interactive-bttn-primary-disabled-border-color: transparent;
    --interactive-bttn-primary-disabled-text-color: #494a5e;
    --interactive-bttn-primary-hover-background-color: #ffffff;
    --interactive-bttn-primary-hover-border-color: #005c8a;
    --interactive-bttn-primary-hover-text-color: #005c8a;
    /* Secondary Button */
    --interactive-bttn-secondary-default-background-color: transparent;
    --interactive-bttn-secondary-default-border-color: #005c8a;
    --interactive-bttn-secondary-default-text-color: #005c8a;
    --interactive-bttn-secondary-disabled-background-color: #bbbbc3;
    --interactive-bttn-secondary-disabled-border-color: transparent;
    --interactive-bttn-secondary-disabled-text-color: #494a5e;
    --interactive-bttn-secondary-hover-background-color: #005c8a;
    --interactive-bttn-secondary-hover-border-color: transparent;
    --interactive-bttn-secondary-hover-text-color: #ffffff;
    /* Hero Primary Button */
    --interactive-bttn-hero-primary-default-background-color: #ffffff;
    --interactive-bttn-hero-primary-default-border-color: transparent;
    --interactive-bttn-hero-primary-default-text-color: #005c8a;
    --interactive-bttn-hero-primary-hover-background-color: #005c8a;
    --interactive-bttn-hero-primary-hover-border-color: #ffffff;
    --interactive-bttn-hero-primary-hover-text-color: #ffffff;
    /* Hero Secondary Button */
    --interactive-bttn-hero-secondary-default-background-color: transparent;
    --interactive-bttn-hero-secondary-default-border-color: #ffffff;
    --interactive-bttn-hero-secondary-default-text-color: #ffffff;
    --interactive-bttn-hero-secondary-hover-background-color: #005c8a;
    --interactive-bttn-hero-secondary-hover-border-color: #ffffff;
    --interactive-bttn-hero-secondary-hover-text-color: #ffffff;
    /* ============================================
   * COMPONENT: CARDS
   * ============================================ */
    --component-card-cta-text-color: #005c8a;
    --component-card-description-text-color: #494a5e;
    --component-card-eyebrow-text-color: #757586;
    --component-card-headline-text-color: #494a5e;
    --component-card-number-card-headline-text-color: #cc092f;
    --component-card-testimonial-card-icon-color: #cc092f;
    --component-card-testimonial-card-author-text-color: #494a5e;
    --component-card-testimonial-card-quote-text-color: #494a5e;
    --component-card-testimonial-card-source-text-color: #494a5e;
    /* ============================================
   * COMPONENT: FOOTER
   * ============================================ */
    --component-footer-background-color: #e8e8eb;
    --component-footer-icon-color: #757586;
    --component-footer-text-color: #272941;
    --component-footer-autopilot-text-color: #494a5e;
    --component-footer-link-text-color: #272941;
    --component-footer-menu-text-color: #272941;
    /* ============================================
   * COMPONENT: HEADER
   * ============================================ */
    --component-header-background-color: #f5f5f6;
    --component-header-icon-color: #494a5e;
    --component-header-menu-default-text-color: #494a5e;
    --component-header-menu-hover-text-color: #494a5e;
    /* ============================================
   * COMPONENT: BREADCRUMB
   * ============================================ */
    --component-breadcrumb-divider-color: #bbbbc3;
    --component-breadcrumb-active-text-color: #757586;
    --component-breadcrumb-default-text-color: #272941;
    --component-breadcrumb-hover-text-color: #0075a3;
    /* ============================================
   * COMPONENT: FORM INPUT
   * ============================================ */
    --component-form-input-background-color: #ffffff;
    --component-form-input-divider-color: #bbbbc3;
    --component-form-input-icon-color: #494a5e;
    --component-form-input-active-border-color: #005c8a;
    --component-form-input-active-text-color: #494a5e;
    --component-form-input-default-border-color: #757586;
    --component-form-input-default-text-color: #757586;
    --component-form-input-focus-border-color: #757586;
    --component-form-input-focus-focus-color: #005c8a;
    --component-form-input-focus-text-color: #494a5e;
    --component-form-input-hover-background-color: #f5f5f6;
    --component-form-input-hover-border-color: #1b1d36;
    --component-form-input-hover-icon-color: #0075a3;
    --component-form-input-hover-text-color: #1b1d36;
    /* ============================================
   * COMPONENT: TABLE
   * ============================================ */
    --component-table-body-background-alt-color: #f5f5f6;
    --component-table-body-background-color: #ffffff;
    --component-table-body-border-color: #bbbbc3;
    --component-table-body-text-color: #494a5e;
    --component-table-head-background-color: #1b1d36;
    --component-table-head-border-color: #ffffff;
    --component-table-head-icon-color: #ffffff;
    --component-table-head-description-text-color: #f5f5f6;
    --component-table-head-section-background-color: #494a5e;
    --component-table-head-title-text-color: #ffffff;
    /* ============================================
   * TYPOGRAPHY TOKENS
   * Font family, sizes, weights, and line heights
   * ============================================ */
    /* Font Family */
    --font-family-primary: 'Inter';
    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    /* Heading XXXL */
    --heading-xxxl-font-size: 44px;
    --heading-xxxl-line-height: 54px;
    --heading-xxxl-font-weight: 700;
    /* Heading XXL */
    --heading-xxl-font-size: 32px;
    --heading-xxl-line-height: 38px;
    --heading-xxl-font-weight: 700;
    --heading-xxl-letter-spacing: -0.25px;
    /* Heading XL */
    --heading-xl-font-size: 26px;
    --heading-xl-line-height: 34px;
    --heading-xl-font-weight: 800;
    --heading-xl-letter-spacing: -0.25px;
    /* Heading L */
    --heading-l-font-size: 22px;
    --heading-l-line-height: 31px;
    --heading-l-font-weight: 800;
    --heading-l-letter-spacing: 0.25px;
    /* Heading M */
    --heading-m-font-size: 18px;
    --heading-m-line-height: 25px;
    --heading-m-font-weight: 800;
    --heading-m-letter-spacing: 0.25px;
    /* Heading S */
    --heading-s-font-size: 14px;
    --heading-s-line-height: 21px;
    --heading-s-font-weight: 700;
    --heading-s-letter-spacing: 0.5px;
    /* Heading Eyebrow */
    --heading-eyebrow-font-size: 14px;
    --heading-eyebrow-line-height: 21px;
    --heading-eyebrow-font-weight: 700;
    --heading-eyebrow-letter-spacing: 0.25px;
    /* Heading Breadcrumb */
    --heading-breadcrumb-font-size: 14px;
    --heading-breadcrumb-line-height: 20px;
    --heading-breadcrumb-font-weight: 400;
    /* Body Standard */
    --body-standard-font-size: 15px;
    --body-standard-line-height: 23px;
    --body-standard-font-weight: 400;
    /* Body Bold */
    --body-bold-font-size: 15px;
    --body-bold-line-height: 23px;
    --body-bold-font-weight: 700;
    /* Body XS */
    --body-xs-font-size: 13px;
    --body-xs-line-height: 20px;
    --body-xs-font-weight: 400;
    /* Body Hero */
    --body-hero-font-size: 19px;
    --body-hero-line-height: 29px;
    --body-hero-font-weight: 400;
    /* CTA Link */
    --cta-link-font-size: 16px;
    --cta-link-line-height: 24px;
    --cta-link-font-weight: 700;
    --cta-link-letter-spacing: 0.25px;
    /* CTA Button */
    --cta-button-font-size: 14px;
    --cta-button-line-height: 21px;
    --cta-button-font-weight: 800;
    --cta-button-letter-spacing: 0.25px;
    /* ============================================
   * SPACING & LAYOUT
   * Consistent spacing values
   * ============================================ */
    --container-max-width: 1170px;
    --container-padding: 135px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
    /* Border Radius */
    --border-radius-sm: 2px;
    --border-radius-md: 4px;
    --border-radius-lg: 5px;
    --border-radius-pill: 20px;
}

/* =========== Buttons ============= */

/* 
        button, .btn, or .bttn = grey button - cancel, close or other second non-active ui choice
        button.primary-bttn or .btn.primary-bttn = red button - submit, go, or active ui choice 
        button.secondary-bttn or .btn.secondary-bttn = blue button - CTA 
*/

button, .btn, .bttn {                                 /* base button, grey w/white text - use for cancel, second/not-active choice button */
    background-color: var(--color-grey--800);         /* see .primary-btn, .secondary-btn classes below to mod */
    color: var(--color-white);
    font-family: var(--font-family--secondary);
    font-size: var(--font-size-md);                    /* normal font size for buttons is -lg, but tools dash has limited real estate so smaller font size */
    font-weight: 300;
    letter-spacing: .35px;
    text-align: center;
    vertical-align: middle;
    text-transform: none;
    text-decoration: none;
/*    border-radius: 4px;*/
    padding: 6px 10px;                                 /* normal padding for buttons is 10px 10px, but limited real estate so reducing top/bottom */
    line-height: 1.5;
    cursor: pointer;
    border: none;

}
button:hover, .btn:hover, .bttn:hover {
    background-color: var(--color-grey--700);
    color: var(--color-white);
}

button.primary-bttn, .btn.primary-bttn, .bttn.primary-bttn {                /* standard submit/go button */
    background-color: var(--color-primary);             /* <button class="primary-bttn" /> or <a href="#" class="btn primary-bttn" /> */
    color: var(--color-white);
}
button.primary-bttn:hover, .btn.primary-bttn:hover, .bttn.primary-bttn {
    background-color: var(--color-primary--dark);
}

button.secondary-bttn, .btn.secondary-bttn, .bttn.secondary-bttn {             /* cta buttons, blue bg w/white */
    background-color: var(--color-secondary);
    color: var(--color-white);
}
button.secondary-bttn, .btn.secondary-bttn, .bttn.secondary-btt {
    background-color: var(--color-secondary--dark);
}

button:disabled,
button[disabled] {
  cursor: not-allowed;
  background-color: var(--color-grey--700);
  opacity: .6;
}

/* =========== Links ========================== */

/* There are 2 main types of links, in-line and block. In-line is used in a sentence such as in a paragraph of text.
Block links are stand-alone like buttons. The main difference is font-family, in-line uses Arial. You can turn a
link into a button by adding button classes: <a href="#" class="btn primary-bttn" />   */

a, .link {                                      /* stand-alone link, block style */
	background-color: transparent;
	font-family: var(--font-family--secondary);
	color: var(--color-secondary);
	font-weight: 500;
}

a.inline-link, .inline-link {                   /* inline link style */
    font-family: var(--font-family--primary);
    color: var(--color-secondary);
    font-weight: 300;
}

/*@keyframes link-fadeinout { 
    0%, 100% { 
        text-decoration-color: transparent; 
    } 
    50% { 
        text-decoration-color: var(--color-primary); 
    }
}*/

a:hover, .link:hover, .inline-link:hover {
    color: var(--color-black);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 2px;
    animation: link-fadeinout 1.5s linear forwards;
}

/* ============= Heads ================== */

h1, h2, h3, h4, h5, h6 {font-family: var(--font-family--secondary);}

h2, h3 {font-weight: 400;}

h4, h5, h6{font-weight: 500;}

h1 {
    font-size: var(--heading-xxl-font-size);
    line-height: var(--heading-xxl-line-height);
    font-weight: var(--heading-xxl-font-weight);
    letter-spacing: var(--heading-xxl-letter-spacing);
    color: var(--text-main-title);
}

h2 {
    font-size: var(--heading-xl-font-size);
    line-height: var(--heading-xl-line-height);
    font-weight: var(--heading-xl-font-weight);
    letter-spacing: var(--heading-xl-letter-spacing);
    color: var(--text-contentblock-title);
}

h3 {
    font-size: var(--heading-l-font-size);
    line-height: var(--heading-l-line-height);
    font-weight: var(--heading-l-font-weight);
    letter-spacing: var(--heading-l-letter-spacing);
    color: var(--component-card-headline-text-color);
}
h4 {font-size:18px}
h5 {font-size: 16px;}
h6 {font-size: 12px;}

p {
    font-size: var(--body-standard-font-size);
    line-height: var(--body-standard-line-height);
    font-weight: var(--body-standard-font-weight);
    color: var(--text-body);
}

/* ============= Decorative Elements / Helpers ================== */

.divider {                                        /* dividing line between two link-bttns or buttons or whatever */
    position: relative;                           /* <div class="divider"></> */
    display: inline-block;
    background-color: var(--color-grey--900);
    width: 1px;
    height: 1.3em;
    margin-left:10px;
    margin-right:10px;
    margin-bottom: -6px;
}