/* webfonts.css
  ================================================== */

/*  Primary = Open Sans 
    Source: https://fonts.google.com/specimen/Open+Sans 
    Variable font version being used with static fallback. 
    Latin + Latin-ext unicode-range only. 

    Static font file weights in use: 300, 400, 500, 600, 
    700 + italic variants. Open Sans variable font is 
    split between normal and italics versions.
    
    Note: "font-weight" and "font-stretch" could also be
    defined using "font-variation-settings" in conjunction 
    with "wght" and "wdth" calling custom property values. 
    Future and currently supported syntax in format hints.
*/

@font-face {
  font-family: "Open Sans Variable";
  font-style: normal;
  font-display: block;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  unicode-range: U+0-24F,U+259,U+2BB,U+2BC,U+2C6,U+2DA,U+2DC,U+1E00-1EFF,U+2000-206F,U+2074,U+20A0-20CF,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD;
  src: url("/pcp-hed/assets/webfonts/primary/variable/unicode-range/latin+latin-ext/open-sans-variable.woff2") format("woff2 supports variations");
  src: url("/pcp-hed/assets/webfonts/primary/variable/unicode-range/latin+latin-ext/open-sans-variable.woff2") format("woff2-variations");
}

/*  Italic version of variable font. */

@font-face {
  font-family: "Open Sans Italic Variable";
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  unicode-range: U+0-24F,U+259,U+2BB,U+2BC,U+2C6,U+2DA,U+2DC,U+1E00-1EFF,U+2000-206F,U+2074,U+20A0-20CF,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD;
  src: url("/pcp-hed/assets/webfonts/primary/variable/unicode-range/latin+latin-ext/opensans-italic-variable.woff2") format("woff2 supports variations");
  src: url("/pcp-hed/assets/webfonts/primary/variable/unicode-range/latin+latin-ext/opensans-italic-variable.woff2") format("woff2-variations");
}

/*  Multiple files for the static font */

/*  Light (300) */

@font-face {
  font-family: "Open Sans Static";
  font-style: normal;
  font-display: block;
  font-weight: 300;
  src: url("/pcp-hed/assets/webfonts/primary/static/open-sans-static-300.woff2") format("woff2");
}

/*  Light (300) italics */

@font-face {
  font-family: "Open Sans Static";
  font-style: italic;
  font-display: block;
  font-weight: 300;
  src: url("/pcp-hed/assets/webfonts/primary/static/open-sans-static-300-italic.woff2") format("woff2");
}

/*  Regular~Default (400) */

@font-face {
  font-family: "Open Sans Static";
  font-style: normal;
  font-display: block;
  font-weight: 400;
  src: url("/pcp-hed/assets/webfonts/primary/static/open-sans-static-400.woff2") format("woff2");
}

/*  Regular~Default (400) italics */

@font-face {
  font-family: "Open Sans Static";
  font-style: italic;
  font-display: block;
  font-weight: 400;
  src: url("/pcp-hed/assets/webfonts/primary/static/open-sans-static-400-italic.woff2") format("woff2");
}

/*  Medium (500) */

@font-face {
  font-family: "Open Sans Static";
  font-style: normal;
  font-display: block;
  font-weight: 500;
  src: url("/pcp-hed/assets/webfonts/primary/static/open-sans-static-500.woff2") format("woff2");
}

/*  Medium (500) italics */

@font-face {
  font-family: "Open Sans Static";
  font-style: italic;
  font-display: block;
  font-weight: 500;
  src: url("/pcp-hed/assets/webfonts/primary/static/open-sans-static-500-italic.woff2") format("woff2");
}

/*  Semibold (600) */

@font-face {
  font-family: "Open Sans Static";
  font-style: normal;
  font-display: block;
  font-weight: 600;
  src: url("/pcp-hed/assets/webfonts/primary/static/open-sans-static-600.woff2") format("woff2");
}

/*  Semibold (600) italics */

@font-face {
  font-family: "Open Sans Static";
  font-style: italic;
  font-display: block;
  font-weight: 600;
  src: url("/pcp-hed/assets/webfonts/primary/static/open-sans-static-600-italic.woff2") format("woff2");
}

/*  Bold (700) */

@font-face {
  font-family: "Open Sans Static";
  font-style: normal;
  font-display: block;
  font-weight: 700;
  src: url("/pcp-hed/assets/webfonts/primary/static/open-sans-static-700.woff2") format("woff2");
}

/*  Bold (700) italics */

@font-face {
  font-family: "Open Sans Static";
  font-style: italic;
  font-display: block;
  font-weight: 700;
  src: url("/pcp-hed/assets/webfonts/primary/static/open-sans-static-700-italic.woff2") format("woff2");
}

/* colors.css
  ================================================== */

:root {
  /*------------------------------------*\
    #UI-ELEMENTS
  \*------------------------------------*/
  --color--background-light: #fff;
  --color--background-gray: #fafafa;
  --color--background-medium: #f3f8fb;
  --color--background-medium-gray: #dfe1e1;
  --color--background-dark: #151515;
  --color--ui-01: #f5f5f5;
  --color--ui-02: #fefefe;
  --color--ui-03: #151515;
  --color--ui-04: #505759;
  --color--ui-05: #919191;
  --color--ui-06: #e6e6e6;
  /* Borders */
  --color--border-01: #dfe1e1;
  --color--border-02: #151515;
  --color--border-03: #919191;
  /* Form fields */
  --color--field: #fff;
  /* Overlays */
  --color--overlay-dark: rgba(21, 21, 21, 0.5);
  --color--overlay-light: rgba(80, 87, 89, 0.5);
  /* Gradients */
  --color--gradient-dark: linear-gradient(
    45deg, 
    rgba(0, 0, 0, 0.25) 0%, 
    rgba(0, 0, 0, 0.1125) 41.15%, 
    rgba(0, 0, 0, 0.1125) 55.73%, 
    rgba(0, 0, 0, 0.25) 100%
    );
  --color--gradient-light: linear-gradient(
    315.12deg, 
    rgba(153, 153, 153, 0.25) 0%, 
    rgba(242, 242, 242, 0.25) 41.15%, 
    rgba(242, 242, 242, 0.25) 55.73%, 
    rgba(153, 153, 153, 0.25) 100%
    );
  --color--gradient-light-on-dark: linear-gradient(
    45.12deg, 
    rgba(204, 204, 204, 0.25) 0%, 
    rgba(242, 242, 242, 0.1125) 41.15%, 
    rgba(242, 242, 242, 0.1125) 55.73%, 
    rgba(204, 204, 204, 0.25) 100%
    );
  /*------------------------------------*\
    #TEXT
  \*------------------------------------*/
  --color--text-primary: #151515;
  --color--text-secondary: #333;
  --color--text-tertiary: #505759;
  --color--text-link: #007a9c;
  --color--text-link-hover: #005d77;
  --color--text-link-active: #004b60;
  --color--text-link-focus: #005d77;
  /* Inverse (text) */
  --color--text-primary-inverse: #fefefe;
  --color--text-secondary-inverse: #fafafa;
  --color--text-tertiary-inverse: #f5f5f5;
  --color--text-link-inverse: #fefefe;
  --color--text-link-hover-inverse: #fafafa;
  --color--text-link-active-inverse: #f5f5f5;
  /*------------------------------------*\
    #ICON
  \*------------------------------------*/
  --color--icon-primary: #151515;
  --color--icon-secondary: #333;
  --color--icon-tertiary: #505759;
  --color--icon-link: #007a9c;
  --color--icon-link-hover: #005d77;
  --color--icon-link-active: #004b60;
  /* Inverse (icon) */
  --color--icon-primary-inverse: #fefefe;
  --color--icon-secondary-inverse: #fafafa;
  --color--icon-tertiary-inverse: #f5f5f5;
  --color--icon-link-inverse: #fefefe;
  --color--icon-link-hover-inverse: #fafafa;
  --color--icon-link-active-inverse: #f5f5f5;
  /*------------------------------------*\
    #INTERACTIVE
  \*------------------------------------*/
  --color--interactive-action: #ffbb1c;
  --color--interactive-action-hover: #151515;
  --color--interactive-action-active: #151515;
  --color--interactive-action-focus: #fff;
  --color--interactive-primary: #9e007e;
  --color--interactive-primary-hover: #722351;
  --color--interactive-primary-active: #722351;
  --color--interactive-secondary: #151515;
  --color--interactive-secondary-hover: #505759;
  --color--interactive-secondary-active: #505759;
  --color--interactive-tertiary: #151515;
  --color--interactive-tertiary-hover: #151515;
  --color--interactive-tertiary-active: #151515;
  /* Inverse (interactive) */
  --color--interactive-action-inverse: #ffbb1c;
  --color--interactive-action-hover-inverse: #ffd06b;
  --color--interactive-action-active-inverse: #ffd06b;
  --color--interactive-primary-inverse: #ae367e;
  --color--interactive-primary-hover-inverse: #be4b90;
  --color--interactive-primary-active-inverse: #be4b90;
  --color--interactive-secondary-inverse: #fff;
  --color--interactive-secondary-hover-inverse: #e1ffff;
  --color--interactive-secondary-active-inverse: #e1ffff;
  --color--interactive-tertiary-inverse: #fff;
  --color--interactive-tertiary-hover-inverse: #fff;
  --color--interactive-tertiary-active-inverse: #fff;
  /* Focus (outline or border color) */
  --color--interactive-focus: #4fa8ff;
  --color--interactive-focus-field: #2f95fc;
  /* Disabled */
  --color--interactive-disabled-01: #e6e6e6;
  --color--interactive-disabled-02: #919191;
  --color--interactive-disabled-03: #767676;
  /*------------------------------------*\
    #ALERTS
  \*------------------------------------*/
  --color--alert-error: #d30018;
  --color--alert-success: #008638;
  --color--alert-warning: #fc630f;
  --color--alert-information: #151515;
  /* Inverse (alerts) */
  --color--alert-error-inverse: #eb3d1a;
  --color--alert-success-inverse: #12b2a6;
  --color--alert-warning-inverse: #ff9c1a;
  --color--alert-information-inverse: #fefefe;
  /*------------------------------------*\
    #ACCENTS
  \*------------------------------------*/
  /* 01 */
  --color--accent-01-light: #ffbb1c;
  --color--accent-01-primary: #ff757a;
  --color--accent-01-medium: #9e007e;
  --color--accent-01-dark: #722362;
  /* 02 */
  --color--accent-02-light: #d2db0e;
  --color--accent-02-primary: #84bd00;
  --color--accent-02-medium: #008638;
  --color--accent-02-dark: #003a00;
  /* 03 */
  --color--accent-03-light: #94e7ea;
  --color--accent-03-primary: #12b2a6;
  --color--accent-03-medium: #003057;
  --color--accent-03-dark: #000a31;
  /* Gradient */
  --color--accent-01-gradient: linear-gradient(
    259.64deg, 
    #ff8275 4.71%, 
    #9e007e 66.44%, 
    #722351 90.65%
  );
}

/* typography.less
  ================================================== */

:root {
  /*------------------------------------*\
    #FALLBACK STACK
  \*------------------------------------*/
  --typefamily-fallback: Helvetica, Verdana, sans-serif;
  /*------------------------------------*\
    #ALTERNATE TYPE FAMILY
    Note: Delta changes from Brand and
    Design mean there is only a single
    type family (Open Sans). Since the
    alt variant is referenced in many 
    associated repositories it was 
    determined that rather than remove 
    it we should simply point to the 
    single (primary) type family. If 
    Brand or Design team decide to add
    an alternate type family back we can
    simply update the value of property.
  \*------------------------------------*/
  --typefamily-alt: var(--typefamily-primary), var(--typefamily-fallback);
  /*------------------------------------*\
    #PRIMARY: STATIC
  \*------------------------------------*/
  --typefamily-primary: "Open Sans Static", var(--typefamily-fallback);
}

/*------------------------------------*\
  #PRIMARY: VARIABLE
\*------------------------------------*/

@supports (font-variation-settings: normal) {
  :root {
    --typefamily-primary: "Open Sans Variable", var(--typefamily-fallback);
    --typefamily-primary-italic: "Open Sans Italic Variable", var(--typefamily-fallback);
  }
}

:root {
  /*------------------------------------*\
    #SCALE
  \*------------------------------------*/
  --typesize-exa: clamp(3.125rem, -1.8750rem + 10.4167vw, 7.5rem);
  --typesize-peta: clamp(3.125rem, -0.4464rem + 7.4405vw, 6.25rem);
  --typesize-tera: clamp(3.125rem, -0.1607rem + 6.8452vw, 6rem);
  --typesize-giga: clamp(3.125rem, 0.9821rem + 4.4643vw, 5rem);
  --typesize-mega: clamp(3.125rem, 1.4107rem + 3.5714vw, 4.625rem);
  --typesize-kilo: clamp(3.125rem, 1.6964rem + 2.9762vw, 4.375rem);
  --typesize-h1-plus: clamp(3.125rem, 4.35vw + 1rem, 4rem);
  --typesize-h1: clamp(2.5rem, 3.25vw + 1rem, 3.125rem);
  --typesize-h1-catalog: clamp(2.375rem, 2.75vw + 1rem, 2.625rem);
  --typesize-h2: clamp(2.125rem, 2.35vw + 1rem, 2.5rem);
  --typesize-h3: clamp(1.75rem, 1.5vw + 1rem, 1.875rem);
  --typesize-h4: 1.5rem;
  --typesize-h5: clamp(1.25rem, 0.6vw + 1rem, 1.375rem);
  --typesize-h6: 1.125rem;
  --typesize-default: 1rem;
  --typesize-p: var(--typesize-default);
  --typesize-minor: 0.875rem;
  --typesize-milli: 0.75rem;
  --typesize-micro: 0.625rem;
  /*------------------------------------*\
    #WEIGHT
  \*------------------------------------*/
  --typeweight--light: 300;
  --typeweight--default: 400;
  --typeweight--medium: 500;
  --typeweight--semibold: var(--typeweight--semibold-plus);
  --typeweight--semibold-plus: 645;
  --typeweight--bold: var(--typeweight--semibold-plus);
  /*------------------------------------*\
    #LEADING (LINE HEIGHT)
  \*------------------------------------*/
  --leading--tightest: 0.825;
  --leading--1: 1;
  --leading--1-1: 1.1;
  --leading--1-15: 1.15;
  --leading--1-2: 1.2;
  --leading--1-3: 1.3;
  --leading--1-4: 1.4;
  --leading--1-5: 1.5;
  --leading--1-6: 1.6;
  --leading--default: var(--leading--1-6);
  --leading--1-7: 1.7;
  --leading--1-8: 1.8;
  --leading--2: 2;
  /*------------------------------------*\
    #CASE
  \*------------------------------------*/
  --typecase-upper: uppercase;
  --typecase-lower: lowercase;
  /*------------------------------------*\
    #STYLE
  \*------------------------------------*/
  --typestyle-normal: normal;
  --typestyle-italic: italic;
  --typestyle-oblique: oblique;
}

/* corners.css (border-radius)
  ================================================== */

:root {
  --corners-semiround-sm: 0.25em;
  --corners-semiround-md: 0.5em;
  --corners-semiround-pill: 2.5em;
  --button-corners: var(--corners-semiround-pill);
}

/* shadows.less (border-radius)
  ================================================== */

:root {
  --shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-blur: 0px 0px 20px rgba(0, 0, 0, 0.15);
}

/* spacing.less
  ================================================== */

:root {
  --spacing-90: 90px;
  --spacing-60: 60px;
  --spacing-45: 45px;
  --spacing-30: 30px;
  --spacing-20: 20px;
  --spacing-15: 15px;
  --spacing-10: 10px;
  --spacing-5: 5px;
  /* Using abstracted unit */
  --space-unit: 5px;
  --space-zero: calc(0 * var(--space-unit));
  --space-xxxsmall: calc(1 * var(--space-unit));
  --space-xxsmall: calc(2 * var(--space-unit));
  --space-xsmall: calc(3 * var(--space-unit));
  --space-small: calc(4 * var(--space-unit));
  --space-medium: calc(6 * var(--space-unit));
  --space-large: calc(9 * var(--space-unit));
  --space-xlarge: calc(12 * var(--space-unit));
  --space-xxlarge: calc(15 * var(--space-unit));
  --space-xxxlarge: calc(18 * var(--space-unit));
  --space-xxxxlarge: calc(24 * var(--space-unit));
}