@import url(https://use.typekit.net/wuc8chx.css);

:root {
  /* Controls page level color. blue | green | teal | purple */
  /* See src/controllers/page-color-controller */
  --page-color: blue;

  --editor-padding-top: 1rem;
  --editor-padding-top-mobile: 0.5rem;
  --editor-padding-bottom: 1rem;
  --editor-padding-bottom-mobile: 0.5rem;

  /* Brand specific primary colors. */
  --brand-primary: #056cb6;
  --brand-secondary: #faa634;
  --brand-tertiary: #8dc63f;
  --brand-quaternary: #7e83bf;
  --brand-quinary: #38939b;
  --brand-senary: #7e8083;

  --blue-darker: #053961;
  --blue-dark: #055d87;
  --blue-default: #056cb6;
  --blue-light: #02a6e9;
  --blue-lighter: #9ed2fa;
  --blue-lightest: #e9f5fc;

  --orange-darker: #f27807;
  --orange-dark: #f99810;
  --orange-default: #faa634;
  --orange-light: #fbc374;
  --orange-lighter: #fdddb0;
  --orange-lightest: #fffbf5;

  --green-darker: #3c5519;
  --green-dark: #597e26;
  --green-default: #8dc63f;
  --green-light: #b5d981;
  --green-lighter: #daecc0;
  --green-lightest: #f1f7e8;

  --purple-darker: #363a6d;
  --purple-dark: #4a5096;
  --purple-default: #7e83bf;
  --purple-light: #adb0d7;
  --purple-lighter: #d6d7eb;
  --purple-lightest: #eff0f7;

  --teal-darker: #1b5d5e;
  --teal-dark: #308188;
  --teal-default: #38939b;
  --teal-light: #5abbc4;
  --teal-lighter: #b4e0e4;
  --teal-lightest: #e6f2f3;

  --gray-darker: #363739;
  --gray-dark: #5a5b5e;
  --gray-default: #7e8083;
  --gray-light: #929293;
  --gray-lighter: #d5d6d7;
  --gray-lightest: #f1f1f1;

  /* Brand Gradients */
  --blue-gradient: linear-gradient(43.91deg, #053961 1.84%, #056cb6 100%);
  --light-blue-gradient: linear-gradient(44.17deg, #9ed2fa 0%, #e9f5fc 100%);
  --orange-gradient: linear-gradient(43.91deg, #f27807 1.84%, #faa634 100%);
  --light-orange-gradient: linear-gradient(246.35deg, #fffcf5 0%, #fdddb0 100%);
  --green-gradient: linear-gradient(43.91deg, #597e26 1.84%, #8dc63f 100%);
  --light-green-gradient: linear-gradient(246.35deg, #f1f7e8 0%, #daecc0 100%);
  --purple-gradient: linear-gradient(43.91deg, #363a6d 1.84%, #7e83bf 100%);
  --light-purple-gradient: linear-gradient(
    279.31deg,
    #eff0f7 14.08%,
    #d6d7eb 85.92%
  );
  --teal-gradient: linear-gradient(43.91deg, #1b5d5e 1.84%, #38939b 100%);
  --light-teal-gradient: linear-gradient(68.94deg, #b4e0e4 0%, #e6f2f3 100%);

  /* Brand specific neutral colors & Generic tones/ */
  --neutral-transparent: transparent;
  --neutral-white: #fff;
  --neutral-grayLight: #f4f4f5;
  --neutral-grayMedium: #a1a1aa;
  --neutral-grayDark: #3f3f46;
  --neutral-black: #000;
  --neutral-blueGray: #455560;

  /* Colors for UI notification messages. */
  --ui-errorBackground: #fee2e2;
  --ui-warningBackground: #fef9c3;
  --ui-infoBackground: #dbeafe;
  --ui-successBackground: #dcfce7;
  --ui-errorText: #b5121b;
  --ui-warningText: #e9202a;
  --ui-infoText: #1d4ed8;
  --ui-successText: #3c5519;

  /* Demo colors used for default component demonstrations */
  --demo-darkBlue: #2563eb;
  --demo-lightBlue: #eff6ff;
  --demo-darkGray: #3f3f46;
  --demo-lightGray: #f4f4f5;

  /* Utitlizing CSS properties here (screens) caused
     the responsive tailwind classes to simply fail.
     @todo: Make screens work with css variables. */
  /* --screen-xs: 480px;
  --screen-sm: 640px;
  --screen-md: 768px;
  --screen-lg: 1024px;
  --screen-xl: 1280px;
  --screen-xxl: 1440px;
  --screen-xxxl: 2180px; */

  --spacing-0: 0px;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-7: 1.75rem;
  --spacing-8: 2rem;
  --spacing-9: 2.25rem;
  --spacing-10: 2.5rem;
  --spacing-11: 2.75rem;
  --spacing-12: 3rem;
  --spacing-14: 3.5rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --spacing-28: 7rem;
  --spacing-32: 8rem;
  --spacing-36: 9rem;
  --spacing-40: 10rem;
  --spacing-44: 11rem;
  --spacing-48: 12rem;
  --spacing-52: 13rem;
  --spacing-56: 14rem;
  --spacing-60: 15rem;
  --spacing-64: 16rem;
  --spacing-72: 18rem;
  --spacing-80: 20rem;
  --spacing-96: 24rem;
  --spacing-px: 1px;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;
  --fs-4xl: 2.25rem;
  --fs-main-title: 2.75rem;
  --fs-5xl: 3.5rem;
  --fs-6xl: 4.5rem;
  --fs-7xl: 5.5rem;
  --fs-8xl: 6.5rem;
  --fs-9xl: 7.5rem;

  --lh-xs: 1rem;
  --lh-sm: 1.25rem;
  --lh-base: 1.5rem;
  --lh-lg: 1.75rem;
  --lh-xl: 1.75rem;
  --lh-2xl: 2rem;
  --lh-3xl: 2.25rem;
  --lh-4xl: 2.5rem;
  --lh-main-title: 3.25rem;
  --lh-5xl: 3.75rem;
  --lh-6xl: 4.75rem;
  --lh-7xl: 5.75rem;
  --lh-8xl: 6.75rem;
  --lh-9xl: 7.75rem;

  --fw-thin: 100;
  --fw-extralight: 200;
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --fs-h1: 2.75rem;
  --fs-h1-mobile: 1.75rem;
  --lh-h1: 3.2rem;
  --lh-h1-mobile: 2.3rem;
  --fs-h2: 2rem;
  --fs-h2-mobile: 1.5rem;
  --lh-h2: 2.3rem;
  --lh-h2-mobile: 2.1rem;
  --fs-h3: 1.75rem;
  --fs-h3-mobile: 1.25rem;
  --lh-h3: 2rem;
  --lh-h3-mobile: 1.75rem;
  --fs-h4: 1.5rem;
  --fs-h4-mobile: 1.125rem;
  --lh-h4: 1.8rem;
  --lh-h4-mobile: 1.5rem;
  --fs-h5: 1.25rem;
  --fs-h5-mobile: 1rem;
  --lh-h5: 1.5rem;
  --lh-h5-mobile: 1.4rem;
  --fs-h6: 1.125rem;
  --fs-h6-mobile: 0.875rem;
  --lh-h6: 1.4rem;
  --lh-h6-mobile: 1.2rem;
}