/* ============================================
   TOKENS - Load once, use everywhere
   ============================================ */
:root {
  --color-black: #292a29;
  --color-black-absolute: #000000;
  --color-text: hsl(120, 1%, 25%);
  --color-white: #ffffff;
  /* ========================================================== */
  /*  Color Base */
  /* ========================================================== */
  --color-base-00: hsl(36, 14%, 96%);
  --color-base-20: hsl(36, 10%, 90%);
  --color-base-30: hsl(36, 10%, 86%);
  --color-base-50: hsl(36, 5%, 58%);
  --color-base-80: hsl(36, 3%, 30%);
  --color-base-90: hsl(36, 3%, 10%);
  --color-base-100: hsl(36, 3%, 3%);
  --color-background: var(--color-base-00);
  /* ========================================================== */
  /*  Color Spot */
  /* ========================================================== */
  --color-primary-00: hsl(296, 23%, 94%);
  --color-primary-00-subtle: hsl(296, 10%, 94%);
  --color-primary-30: hsl(291, 23%, 70%);
  --color-primary-40-subtle: hsl(296, 10%, 60%);
  --color-primary-50: hsl(292, 23%, 50%);
  --color-primary-50-subtle: hsl(296, 10%, 50%);
  --color-primary-60: hsl(297, 23%, 30%);
  --color-primary-60-subtle: hsl(296, 10%, 30%);
  --color-primary-80: hsl(296, 17%, 17%);
  --color-primary-80-subtle: hsl(296, 12%, 17%);
  --color-primary-90: hsl(296, 23%, 12%);
  --color-primary-90-subtle: hsl(296, 12%, 12%);
  --color-primary-100: hsl(296, 23%, 3%);
  --color-primary-bright: hsl(285, 32%, 77%);
  --color-primary-bright-50: hsl(285, 20%, 68%);
  /* ========================================================== */
  /*  Colors Screen */
  /* ========================================================== */
  --color-white-screen-80: rgba(255, 255, 255, 0.85);
  --color-white-screen-20: rgba(255, 255, 255, 0.2);
  --color-black-screen-05: rgba(0, 0, 0, 0.05);
  --color-black-screen-10: rgba(0, 0, 0, 0.1);
  --color-black-screen-25: rgba(0, 0, 0, 0.25);
  --color-black-screen-50: rgba(0, 0, 0, 0.5);
  --color-black-screen-70: rgba(0, 0, 0, 0.7); /* used for greyed out text */
  --color-primary-screen-25: rgba(92, 59, 94, 0.25);
  /* ========================================================== */
  /*  Colors Links */
  /* ========================================================== */
  --color-link: hsl(192, 87%, 24%);
  --color-link-underline: rgba(49, 144, 167, 0.5);
  --color-link-hover: #3a8195;
  --color-link-visited: #5b439d;
  --color-link-visited-light: #806eb2;
  --color-link-visited-underline: rgba(91, 67, 157, 0.5);
  --color-link-active: #16bce6;
  --color-button-text-light: var(--color-base-00);
  --color-link-disabled: hsl(192, 18%, 91%);
  --color-link-disabled-subtle: hsl(188, 42%, 67%);
  --color-link-disabled-darkmode: hsl(192, 18%, 71%);
  --color-link-light: #3abedf;
  --color-link-light-underline: rgb(11, 171, 211, 0.5);
  --color-link-hover-light: #0983a1;
  --color-link-visited-light: #7f5fd9;
  --color-link-visited-underline: rgb(127, 95, 217, 0.5);
  --color-link-active-light: #16bce6;
  --color-focus: var(--color-primary-50);
  /* ========================================================== */
  /*  Color Float Boxes */
  /* ========================================================== */
  --color-floatbox-light: var(--color-white-screen-80);
  --color-floatbox-dark: var(--color-black-screen-25);
  /* ========================================================== */
  /*  Drop Shadows */
  /* ========================================================== */
  --dropshadow-base: 0 5px 10px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --dropshadow-darkened: 0 7px 7px -3px rgba(0, 0, 0, 0.2);
  --dropshadow-base-hovered: 0px 7px 7px -2px rgba(0, 0, 0, 0.2);
  --dropshadow-hoverbox: 0 8px 24px rgba(0, 0, 0, 0.6);
  /* ========================================================== */
  /*  Color Alerts */
  /* ========================================================== */
  --color-complete: #a1b6c9;
  --color-success: #019e7c;
  --color-success-dark: #057b62;
  --color-error: #ff3c00;
  --color-warning-light: #fff6cd;
  --color-warning: #ffd200;
  --color-warning-dark: #a98a00;
  /* ========================================================== */
  /*  Colors Print */
  /* ========================================================== */
  --color-print-black: var(--color-black-absolute);
  --color-print-white: var(--color-white);
  --color-print-black-10: #e8e8e8;
  --color-print-black-20: #cfcfcf;
  --color-print-black-40: #999;
  --color-print-black-60: #666;
}

:root {
  /* ========================================================== */
  /*  Site Logos */
  /* ========================================================== */
  --logo-main: url("../images/logos/site_logo_main.svg");
  --logo-alt-white: url("../images/logos/site_logo_white.svg");
  --logo-alt-black: url("../images/logos/site_logo_black.svg");
  --logo-color-onecolor: url("../images/logos/site_logo_color.svg");
  --logo-base-40: url("../images/logos/site_logo_light.svg");
  --logo-base-70: url("../images/logos/site_logo_dark.svg");
  /* ========================================================== */
  /*  Icons Navigation and Search */
  /* ========================================================== */
  --element-menu: url("../images/icons/menu.svg");
  --element-menu-light: url("../images/icons/menu-light.svg");
  --element-menu-spot: url("../images/icons/menu.svg");
  --element-search: url("../images/icons/magnifying-glass.svg");
  --element-search-light: url("../images/icons/magnifying-glass-light.svg");
  --element-search-bright: url("../images/icons/magnifying-glass-bright.svg");
  --icon-eye: url("../images/icons/eye.svg");
  --icon-eye-light: url("../images/icons/eye-light.svg");
  --icon-userprofile-dark: url("../images/icons/userprofile-dark.svg");
  --icon-userprofile-light: url("../images/icons/userprofile-light.svg");
  --icon-userprofile-bright: url("../images/icons/userprofile-bright.svg");
  --element-caret-down: url("../images/icons/chevron-down-thin.svg");
  --element-caret-up: url("../images/icons/chevron-up-thin.svg");
  --element-caret-right: url("../images/icons/chevron-right-thin.svg");
  --element-caret-down-light: url("../images/icons/chevron-down-thin-light.svg");
  --element-caret-up-light: url("../images/icons/chevron-up-thin-light.svg");
  --element-caret-right-light: url("../images/icons/chevron-right-thin-light.svg");
  /* ========================================================== */
  /*  Icons Cart */
  /* ========================================================== */
  --icon-cart-light: url("../images/icons/cart-light.svg");
  /* ========================================================== */
  /*  External Links */
  /* ========================================================== */
  --element-linkexternal-light: url("../images/icons/element_external_link-graylight.svg");
  --element-linkexternal-med: url("../images/icons/element_external_link-graymed.svg");
  --element-linkexternal-dark: url("../images/icons/element_external_link-black.svg");
  /* ========================================================== */
  /*  Social Media Icons */
  /* ========================================================== */
  --social-instagram: url("../images/socials/instagram.svg");
  --social-instagram-light: url("../images/socials/instagram-light.svg");
  --social-youtube: url("../images/socials/youtube.svg");
  --social-youtube-light: url("../images/socials/youtube-light.svg");
  --social-facebook: url("../images/socials/facebook.svg");
  --social-facebook-light: url("../images/socials/facebook-light.svg");
  --social-twitter: url("../images/socials/twitter.svg");
  --social-twitter-light: url("../images/socials/twitter-light.svg");
  --social-threads: url("../images/socials/threads.svg");
  --social-threads-light: url("../images/socials/threads-light.svg");
  --social-tiktok: url("../images/socials/tiktok.svg");
  --social-tiktok-light: url("../images/socials/tiktok-light.svg");
  --social-pinterest: url("../images/socials/pinterest.svg");
  --social-pinterest-light: url("../images/socials/pinterest-light.svg");
  --social-snapchat: url("../images/socials/snapchat.svg");
  --social-snapchat-light: url("../images/socials/snapchat-light.svg");
  --social-linkedin: url("../images/socials/linkedin.svg");
  --social-linkedin-light: url("../images/socials/linkedin-light.svg");
  --social-linktree: url("../images/socials/linktree.svg");
  --social-linktree-light: url("../images/socials/linktree-light.svg");
  --social-orcid: url("../images/socials/orcid.svg");
  --social-orcid-light: url("../images/socials/orcid-light.svg");
  --social-email: url("../images/socials/email.svg");
  --social-email-light: url("../images/socials/email-light.svg");
  --pdf-small: url("../images/icons/pdficon_small.png");
  --pdf-large: url("../images/icons/pdficon_large.png");
  /* ========================================================== */
  /*  Mode Icons */
  /* ========================================================== */
  --mode-auto-light: url("../images/icons/mode-auto-light.svg");
  --mode-dark-light: url("../images/icons/mode-dark-light.svg");
  --mode-light-light: url("../images/icons/mode-light-light.svg");
  --mode-alt-light: url("../images/icons/mode-alt-light.svg");
  --mode-auto-dark: url("../images/icons/mode-auto-dark.svg");
  --mode-dark-dark: url("../images/icons/mode-dark-dark.svg");
  --mode-light-dark: url("../images/icons/mode-light-dark.svg");
  --mode-alt-dark: url("../images/icons/mode-alt-dark.svg");
  /* ========================================================== */
  /*  Patterns */
  /* ========================================================== */
  --pattern-main: url("../images/patterns/site_pattern.svg");
  /* ========================================================== */
  /*  Settings Icons */
  /* ========================================================== */
  --icon-settings-dark: url("../images/icons/gear-dark.svg");
  --icon-settings-light: url("../images/icons/gear-light.svg");
  --icon-settings-bright: url("../images/icons/gear-bright.svg");
}

:root {
  /* ========================================================== */
  /*  Grid */
  /* ========================================================== */
  --container-max-width: 1200px;
  /* Breakpoint values as CSS custom properties */
  --bp-mobile: 320px;
  --bp-tablet: 980px;
  --bp-desktop: 1024px;
  --bp-wide: 1280px;
  --bp-ultrawide: 1536px;
  --width-readingtext: 760px;
}

:root {
  /* ========================================================== */
  /*  Spacing */
  /* ========================================================== */
  --spacing-unit: 12px;
  --margin: calc(2 * var(--spacing-unit));
  --padding: calc(2 * var(--spacing-unit));
  --margin-xsm: calc(0.25 * var(--margin));
  --margin-sm: calc(0.5 * var(--margin));
  --margin-smed: calc(1.5 * var(--margin));
  --margin-md: calc(2 * var(--margin));
  --margin-mdlg: calc(3 * var(--margin));
  --margin-lg: calc(4 * var(--margin));
  --margin-xlg: calc(10 * var(--margin));
  --padding-xsm: calc(0.25 * var(--padding));
  --padding-sm: calc(0.5 * var(--padding));
  --padding-md: calc(2 * var(--padding));
  --padding-mdlg: calc(3 * var(--padding));
  --padding-lg: calc(4 * var(--padding));
  --button-padding-supersmall: 4px 12px;
  --padding-mobilemenu: 18px;
  --padding-mobilemenu-neg: -16px;
  /* ========================================================== */
  /*  Dimensions */
  /* ========================================================== */
  --menu-dimension-base: 48px;
  /* ========================================================== */
  /*  Clickable Padding */
  /* ========================================================== */
  --button-padding: 12px 24px;
  --button-padding-skinny: 4px 12px;
  --navigation-padding: 12px 12px;
}

:root {
  /* ========================================================== */
  /*  Typography */
  /* ========================================================== */
  --font-family-sans: "Noto Sans", Helvetica, Roboto, Arial, system-ui,
    sans-serif;
  --font-family-serif: "Arvo", Constantia, "Lucida Bright", Lucidabright,
    "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif",
    "Liberation Serif", Georgia, serif;
  /* ========================================================== */
  /*  Type Line Heights */
  /* ========================================================== */
  --font-lineheight-tight: 1.1; /* titles very tight */
  --font-lineheight-titles: 1.3; /* titles */
  --font-lineheight-small: 1.45; /* small text */
  --font-lineheight-medium: 1.65; /* card reading text */
  --font-lineheight-base: 1.7; /* reading text */
  --font-lineheight-xxlarge: 2.4; /* special buttons and titles */
  /* ========================================================== */
  /*  Type Sizing */
  /* ========================================================== */
  --font-size-xlg: 2rem;
  --font-size-lg: 1.8rem;
  --font-size-marge: 1.6rem;
  --font-size-md: 1.4rem;
  --font-size-plus: 1.2rem;
  --font-size-base: 1rem;
  --font-size-sm: 0.9rem;
  --font-size-xsm: 0.8rem;
  --font-size-xxsm: 0.75rem;
  --font-size-xxxsm: 0.65rem;
  --font-size-buttons: 1rem;
  /* ========================================================== */
  /*  Type Sizing Reading Areas */
  /* ========================================================== */
  --font-size-reading: clamp(1.1rem, 1rem + 0.3vw, 1.2rem);
  --font-size-plus-reading: clamp(1.2rem, 1.1rem + 0.5vw, 1.35rem);
  --font-size-lg-reading: clamp(1.35rem, 1.2rem + 1vw, 1.6rem);
  --font-size-xl-reading: clamp(1.7rem, 1.6rem + 2vw, 2.2rem);
  --font-size-xxl-reading: clamp(2.2rem, 1.75rem + 2.75vw, 3.4rem);
  --font-size-reading-small: clamp(
    0.75rem,
    0.8rem + 0.5vw,
    /* gentler scaling */ 1.1rem
  ); /* captions text */
}

:root {
  /* ========================================================== */
  /*  Strokes  */
  /* ========================================================== */
  --border-thickness: 1px;
  --border-thickness-thick: 2px;
  --border-thickness-superthick: 8px;
  /* ========================================================== */
  /*  Corner Radius  */
  /* ========================================================== */
  --border-radius-base: 22px;
  --border-radius-inner: 21px;
  --border-radius-standard: 10px;
  --border-radius-forms: 6px;
  --border-radius-pill: 999px;
}

:root {
  /* ========================================================== */
  /*  Setup */
  /* ========================================================== */
  --color-interactive-material: #d0d7de;
  --color-interactive-dark: var(--color-link);
  --color-interactive-light: var(--color-link-light);
  --color-interactive-bright: var(--color-link-active);
  --color-interactive-subtle: var(--color-link-hover);
  --color-interactive-disabled: var(--color-link-disabled);
  --color-interactive-disabled-hover: var(--color-link-disabled-subtle);
  /* ========================================================== */
  /*  Text */
  /* ========================================================== */
  --color-button-text: var(--color-interactive-dark);
  --color-button-text-light: var(--color-interactive-light);
  --color-button-text-bright: var(--color-interactive-bright);
  /* ========================================================== */
  /*  Outline */
  /* ========================================================== */
  --color-button-outline: var(--color-interactive-dark);
  --color-button-outline-subtle: var(--color-interactive-subtle);
  --color-button-outline-light: var(--color-interactive-light);
  --color-button-outline-bright: var(--color-interactive-bright);
  /* ========================================================== */
  /*  Fill */
  /* ========================================================== */
  --color-button-fill: var(--color-interactive-dark);
  --color-button-fill-subtle: var(--color-interactive-subtle);
  --color-button-fill-light: var(--color-interactive-light);
  --color-button-fill-bright: var(--color-interactive-bright);
  /* ========================================================== */
  /*  Disabled */
  /* ========================================================== */
  --color-button-fill-disabled: var(--color-interactive-disabled);
  --color-button-fill-disabled-hover: var(--color-interactive-disabled-hover);
  /* ========================================================== */
  /* Hover Effects */
  /* ========================================================== */
  --hover-effect-base: translate(0px, -7px);
}

:root {
  /* ========================================================== */
  /*  Colors Print */
  /* ========================================================== */
  --color-print-black: #000;
  --color-print-white: #fff;
  --color-print-black-10: #e8e8e8;
  --color-print-black-20: #cfcfcf;
  --color-print-black-40: #999;
  --color-print-black-60: #666;
}

/* use mixins like paragraph styles in InDesign, spec it out here, give it a name, and call that name anywhere else in your code */
/* ========================================================== */
/*  Buttons */
/* ========================================================== */
/* ========================================================== */
/*  Card Rounded Corners */
/* ========================================================== */
/* ========================================================== */
/*  Responsive Breakpoints */
/* ========================================================== */
/* ============================================
   BASE LAYER
   ============================================ */
/* Import mixins (needed for SCSS features like @include) */
body {
  color: var(--color-text, #111827);
  background-color: var(--color-background, #ffffff);
}