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

:root {
  --color-penn-red: #990000;
  --color-penn-blue: #011F5B;

  --color-gray-dark: #2D3545;
  --color-gray: #595F6A;
  --color-gray-light: #F5F5F6;

  --color-gray-blue-light: #EEEEF4;
  
  --color-white: #FFFFFF;

  --color-blue: #0E5696;
  --color-blue-light: #D4E4F2;

  --color-green: #267434;
  --color-green-light: #F1F7E1;

  --color-orange: #BD4718;
  --color-orange-light: #FEEDDD;

  --color-purple: #80317F;
  --color-purple-light: #F2DFED;

  --color-bg-gradient-1: linear-gradient(45deg, rgba(200, 219, 232, 0.8), rgba(239, 210, 215, 0.8));
  --color-bg-gradient-2: linear-gradient(45deg, #dbe9f5, #feefdf);

  --font-size: 16px;
  --font-sans-serif: proxima-nova, system-ui, sans-serif;
  --font-serif: cormorant-garamond, serif;

  --link-text-underline-offset: 0.2em;
  --link-text-decoration-thickness: 1px;
  --link-hover-text-decoration-thickness: 2px;

  --max-width: 1280px;
  --viewport-margins-gutter: 1rem;
}

html {
  --color-fg-default: var(--color-gray-dark);
  --color-fg-subtle: var(--color-gray);

  --color-fg-subtle-on-emphasis: var(--color-gray-light);
  --color-fg-on-emphasis: var(--color-white);

  --color-fg-accent: var(--color-blue);
  --color-fg-success: var(--color-green);
  --color-fg-attention: var(--color-orange);
  --color-fg-info: var(--color-purple);

  --color-bg-default: var(--color-white);
  --color-bg-subtle: var(--color-gray-light);
  --color-bg-subtle-brand: var(--color-gray-blue-light);
  --color-bg-emphasis: var(--color-gray-dark);

  --color-bg-accent: var(--color-blue-light);
  --color-bg-success: var(--color-green-light);
  --color-bg-attention: var(--color-orange-light);
  --color-bg-info: var(--color-purple-light);

  --color-bg-accent-emphasis: var(--color-blue);
  --color-bg-success-emphasis: var(--color-green);
  --color-bg-attention-emphasis: var(--color-orange);
  --color-bg-info-emphasis: var(--color-purple);

  --link-visited-color: var(--color-purple);

  --font-family: var(--font-sans-serif);
}

.viewport-margins {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--viewport-margins-gutter, 1rem);
  width: 100%;
}

/*
  Prevents a flash of unstyled content (FOUC) while custom elements are loading.
  Ensures that elements are only visible once they're fully defined and ready to be displayed.
*/
:not(:defined) {
  visibility: hidden;
}