/*
 * All 5 CDN @import statements from _01-variables.scss (`@import url(...)`
 * statements pass through Sass untouched into compiled CSS, since Sass only
 * processes local file imports -- so none of these were ever actually
 * bundled by the Fractal build, just live runtime CDN fetches baked into
 * every page via global.css). Phase 7 removed global.css and, with it,
 * this dependency.
 *
 * Task 5 of this phase restored only the 2 FontAwesome imports (found via
 * a live-comparison sweep against production after every icon glyph
 * sitewide broke) -- silently missing the other 3 in the same source
 * block, found only later via a user report that a specific paragraph on
 * a real page was missing the Inter body font. Root cause: `--font-body`
 * (below) references "inter-variable" as the font family name, but that
 * name is provided by Adobe Fonts (Typekit) -- the actual @import that
 * loads it (`use.typekit.net/beo2rid.css`) was never restored, so every
 * element using `var(--font-body)` (i.e. nearly all body text sitewide)
 * has always silently fallen through to the "sans-serif" stack fallback
 * since Phase 7 removed global.css, not just the one reported paragraph.
 * The Google Fonts "Anton" import's only source-file consumer
 * (styleguide/components/03-sections/26-go_campaign/go_banner.scss, an
 * old page-type-scoped capital-campaign promo banner) was never converted
 * to an SDC in any phase of this migration and has zero real template
 * consumers today (confirmed via a repo-wide grep for its classes, e.g.
 * ".campaign-promo-header-text") -- like "Nunito" (which has no real
 * call site anywhere in the compiled Fractal bundle either), it is
 * restored anyway for parity with production's actual capability, per
 * this migration's established practice, not because of any current live
 * consumer.
 *
 * Restoring all 5 here (not self-hosting) exactly matches what production
 * still depends on today -- confirmed via curl against the live site.
 * @import must precede all other CSS rules, so these stay at the top of
 * this file (weight -90, the second theme CSS asset loaded after only
 * vendor-reset.css at weight -100, per college_of_business.libraries.yml).
 * Drupal's CSS aggregator hoists @import statements to the top of the
 * aggregate when aggregation is on, so exact load order doesn't matter here
 * either way -- these stay valid and effective in both modes.
 */
@import url("https://use.typekit.net/beo2rid.css");
@import url("https://fonts.googleapis.com/css?family=Nunito:600,600i&display=swap");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css");
@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");
@import url("https://fonts.googleapis.com/css?family=Anton");

/*
 * Lehigh's custom "Dopis" font family, found missing entirely (found via the
 * same post-Phase-7 live-comparison sweep that found the FontAwesome imports
 * and the slick/video CSS leaks, this time prompted by a user report that
 * hover-box heading text rendered wrong on a real page): _01-variables.scss
 * defines these 4 @font-face declarations (never ported to any phase of this
 * migration) alongside the `--font-heading`/`--font-lehigh-business` custom
 * properties below (which WERE ported correctly) -- so every rule using
 * `var(--font-heading)` etc. has always silently fallen through to the
 * "sans-serif" fallback in the stack, never the real Dopis font, since the
 * font was never actually loaded. Restoring these here (not self-hosting)
 * exactly matches what production still depends on today, the same
 * reasoning as the FontAwesome CDN restore above.
 */
@font-face {
  font-family: DopisRegular;
  src: url("https://www.lehigh.edu/~inis/fonts/Web-Dopis-Family-Pack/DopisRegular.woff2") format("woff2"),
    url("https://www.lehigh.edu/~inis/fonts/Web-Dopis-Family-Pack/DopisRegular.woff") format("woff");
}

@font-face {
  font-family: DopisBold;
  src: url("https://www.lehigh.edu/~inis/fonts/Web-Dopis-Family-Pack/DopisBold.woff2") format("woff2"),
    url("https://www.lehigh.edu/~inis/fonts/Web-Dopis-Family-Pack/DopisBold.woff") format("woff");
}

@font-face {
  font-family: DopisCondensedRegular;
  src: url("https://www.lehigh.edu/~inis/fonts/Web-Dopis-Family-Pack/DopisCondensedRegular.woff2") format("woff2"),
    url("https://www.lehigh.edu/~inis/fonts/Web-Dopis-Family-Pack/DopisCondensedRegular.woff") format("woff");
}

@font-face {
  font-family: DopisCondensedBold;
  src: url("https://www.lehigh.edu/~inis/fonts/Web-Dopis-Family-Pack/DopisCondensedBold.woff2") format("woff2"),
    url("https://www.lehigh.edu/~inis/fonts/Web-Dopis-Family-Pack/DopisCondensedBold.woff") format("woff");
}

/*
 * Theme-global custom properties. Translated 1:1 from the Fractal source's
 * Sass variables (_color-vars.scss, _01-variables.scss). Do not introduce
 * new tokens here casually — this file is the single source of truth for
 * color/font/spacing values across every converted component.
 */

:root {
  /* Primary palette (UCPA color guide) */
  --color-lehigh-brown: #502d0e;
  --color-white: #ffffff;
  --color-first-light: #f5e9ad;
  --color-cherry-blossom: #fcd8d6;
  --color-golden-hour: #ffe41e;
  --color-autumn-dusk: #eba033;
  --color-mountaintop-mist: #d1e9e8;
  --color-bethlehem-sky: #66b0ff;
  --color-spring-violet: #5e74ee;
  --color-night-sky: #12354c;
  --color-patina-green: #afedc9;
  --color-valley-green: #2cb357;
  --color-serenity-garden: #1b3a24;
  --color-go-red: #ff4438;

  /* Lehigh Brown scale */
  --color-lehigh-brown-10: #eee8e5;
  --color-lehigh-brown-20: #ded2cc;
  --color-lehigh-brown-60: #9d7766;
  --color-lehigh-brown-80: #7c4d36;

  /* Gold scale */
  --color-gold: #ffda40;
  --color-gold-20: #fff6da;
  --color-gold-60: #ffe690;
  --color-gold-80: #ffdd6d;
  --color-gold-k20: #dbb144;

  /* Red scale */
  --color-red: #ff3d3a;
  --color-red-20: #ffd8d7;
  --color-red-60: #ff8b86;
  --color-red-k20: #d23734;

  /* Teal scale */
  --color-teal: #71c4bc;
  --color-teal-20: #e3f3f2;
  --color-teal-60: #aadcd6;
  --color-teal-k20: #60a49f;
  --color-teal-k60: #386763;

  /* Blue scale */
  --color-blue: #46b1db;
  --color-blue-20: #dceff8;
  --color-blue-60: #94d0e9;
  --color-blue-k20: #3c94b7;
  --color-blue-k60: #1d5970;

  /* Grey scale */
  --color-grey: #cec7c0;
  --color-grey-20: #f5f4f3;
  --color-grey-60: #e1ddd9;
  --color-grey-k20: #ada6a0;
  --color-grey-k60: #6a6764;

  /* Other colors used */
  --color-off-white: #f1f1f1;
  --color-black: #000000;
  --color-grey-darkest: #333333;
  --color-grey-dark: #344654;
  --color-grey-light: #d7d7d7;
  --color-grey-lightest: #f1f1f1;
  --color-drop-shadow: #888888;
  --color-hyperlink: #497ba4;
  --color-highlight-teal: #88c6bc;
  --color-blue-arrow: #81b0d2;

  /* Font stacks */
  --font-body: "inter-variable", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-heading: DopisRegular, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-quotation: Arial;
  --font-awesome: "FontAwesome";
  --font-lehigh-business: "DopisRegular", Helvetica, Arial, sans-serif;

  /* Spacing scale — $space was 1rem in the Sass source; every other spacing
     value was a multiple/fraction of it. calc() reproduces that relationship
     without a preprocessor, so changing --space here still cascades. */
  --space: 1rem;
  --space-three-quarter: calc(var(--space) * 0.75);
  --space-one-half: calc(var(--space) / 2);
  --space-one-third: calc(var(--space) / 3);
  --space-one-fourth: calc(var(--space) / 4);
  --space-one-fifth: calc(var(--space) / 5);
  --space-one-sixth: calc(var(--space) / 6);
  --space-one-seventh: calc(var(--space) / 7);
  --space-one-eighth: calc(var(--space) / 8);
  --space-and-one-half: calc(var(--space) * 1.5);
  --space-double: calc(var(--space) * 2);
  --space-triple: calc(var(--space) * 3);
  --space-quadruple: calc(var(--space) * 4);
  --space-quintuple: calc(var(--space) * 5);
  --space-sextuple: calc(var(--space) * 6);
  --space-septuple: calc(var(--space) * 7);
  --space-octuple: calc(var(--space) * 8);
  --space-nonagon: calc(var(--space) * 9);
  --space-decagon: calc(var(--space) * 10);
}

/*
 * Breakpoint reference — NOT usable as custom properties inside @media
 * conditions without a build step, so these are documented here for later
 * phases to hardcode literally in each component's own @media rule. Two
 * independent Sass breakpoint scales exist in the source; preserve both as
 * separate references rather than unifying them now (simplify-later, not in
 * this phase):
 *
 * From _02-breakpoints.scss (generic layout/typography breakpoints):
 *   $xs: 320px   $small: 480px   $medium: 720px   $large: 920px
 *   $xl: 1224px  $max-width: $xl (1224px)
 *
 * From _01-variables.scss (a separate, unrelated scale):
 *   $break-tablet-land: 1023px   $break-tablet: 500px
 *   $break-desktop: 769px        $break-desktop-large: 2200px
 *   $break-mobile: 500px
 *
 * Drupal's own college_of_business.breakpoints.yml uses a THIRD, unrelated
 * scale (576/768/992/1200px, for responsive image styles only) — do not
 * confuse it with either scale above; it serves a different system.
 */
