/**
 * Do not edit directly, this file was auto-generated.
 * See <PARAGON_ROOT>/tokens/README.md for more details.
 */

:root {
  --pgn-size-btn-focus-width: 2px; /** Button focus-ring width. Theme-agnostic; mirrors the light theme so the dark variables file is a self-sufficient standalone theme (loaded alone in dark-only mode). */
  --pgn-size-input-btn-focus-width: 1px; /** Input/button focus-ring width. Theme-agnostic (mirrors light). */
  --pgn-spacing-input-btn-padding-y: 0.5625rem; /** Vertical padding for inputs/buttons. Theme-agnostic (mirrors light). */
  --pgn-rg-size-course-card-image-horizontal-width-max: 360px;
  --pgn-rg-size-footer-logo-height: 16px; /** The height of the logo in the footer. */
  --pgn-rg-size-header-logo-desktop-height: 16px; /** The height of the logo in the header. */
  --pgn-rg-size-header-logo-mobile-height: 16px; /** The height of the logo in the header for mobile devices. */
  --pgn-rg-size-container: 1230px; /** The width of the container. */
  --pgn-rg-course-card-border-color: #585C66FF;
  --pgn-rg-color-footer-bg: #1C212CFF; /** The background color of the footer (dark theme surface). */
  --pgn-rg-color-header-bg: #1C212CFF; /** The background color of the header (dark theme surface). */
  --pgn-rg-color-registration-side-left-bg: #333741FF; /** The background color of left side of the registration page (dark theme). */
  --pgn-rg-color-primary: #4674DCFF; /** The primary brand color. MUST match the light theme value (the client's brandbook color, unique per site) — do NOT lighten the base for dark. Only the derived shades (.100-.900, link hover, etc.) are generated for the dark surface via the `modify` mixes below. */
  --pgn-rg-color-body-bg: #1C212CFF; /** Body background color (dark theme). Matches the MFE dark base (#212529); was #1b1b1b but legacy + MFE are unified on #212529 — see `surface-0`. */
  --pgn-rg-color-surface-0: #212529FF; /** Dark theme: base page background (same as body bg). */
  --pgn-rg-color-surface-1: #2E3340FF; /** Dark theme: card / panel / popover / modal surface. */
  --pgn-rg-color-surface-2: #333842FF; /** Dark theme: input / control / raised-button surface. */
  --pgn-rg-color-surface-3: #2F2F2FFF; /** Dark theme: slightly raised surface (table / gradebook headers, distinct action chips). */
  --pgn-rg-color-surface-4: #464D5AFF; /** Dark theme: surface level 4. */
  --pgn-rg-color-surface-secondary-dark-3: #323A4AFF; /** Dark theme: Secondary Dark 3 surface. */
  --pgn-rg-color-surface-secondary-dark-4: #474D59FF; /** Dark theme: Secondary Dark 4 surface. */
  --pgn-rg-color-surface-hover: #333333FF; /** Dark theme: hover surface for buttons / menu items. */
  --pgn-rg-color-surface-inset: #1F1F1FFF; /** Dark theme: inset / recessed surface (rich-text editor area, text-outline halo). */
  --pgn-rg-color-surface-chart: #343A40FF; /** Dark theme: chart bar / funnel level-1 surface. */
  --pgn-rg-color-border: #3A3A3AFF; /** Dark theme: default border / hairline. Also reused as a subtle selected/hover fill. */
  --pgn-rg-color-border-strong: #5A5A5AFF; /** Dark theme: stronger border (disabled outlines, chart axis lines). */
  --pgn-rg-color-divider: #454545FF; /** Dark theme: menu / dropdown divider (matches the MFE .menu-content divider). */
  --pgn-rg-color-text-primary: #E8E8E8FF; /** Dark theme: primary text / headings on the dark surface. */
  --pgn-rg-color-text-secondary: #D8D8D8FF; /** Dark theme: secondary / body text. */
  --pgn-rg-color-text-muted: #B0B0B0FF; /** Dark theme: muted text, captions, menu items. */
  --pgn-rg-color-text-placeholder: #9A9A9AFF; /** Dark theme: placeholder / dim text. */
  --pgn-rg-color-text-disabled: #8A8A8AFF; /** Dark theme: disabled text, off/adjacent-month dates. */
  --pgn-rg-color-link-active: #86A4E9FF; /** Dark theme: brighter active/selected link green (active dashboard tab, etc.). */
  --pgn-rg-color-primary-muted: #2F5A2FFF; /** Dark theme: muted/disabled brand-green fill (disabled primary buttons). */
  --pgn-rg-color-staff: #C2387DFF; /** Staff-action magenta (matches the light theme $staff-color). */
  --pgn-rg-color-staff-fg: #E07CB0FF; /** Dark theme: staff magenta lightened to pass AA as text on the dark surface. */
  --pgn-rg-color-info-surface: #2E3D4AFF; /** Dark theme: blue-slate selected/active highlight surface (funnel drill-down, info states). */
  --pgn-rg-spacing-header-vertical-padding: 30px; /** The vertical padding of the header. */
  --pgn-rg-spacing-promo-title-margin: 0; /** Bottom margin from H1 title on banner */
  --pgn-rg-typography-font-family-sans-serif: Roboto, 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; /** Sans-serif font family. */
  --pgn-color-link-base: #80AAFFFF;
  --pgn-color-white: #FFFFFFFF; /** White color. */
  --pgn-color-light-150: #FFFFFF26; /** Dark theme: light-150 override. */
  --pgn-color-light-700: #FFFFFFB3; /** Dark theme: light-700 override. */
  --pgn-rgg-main-text-color: #BCBCBCFF; /** The RGG main text color. */
  --pgn-rgg-secondary-text-color: #E8E8E8FF; /** The RGG secondary text color (dark theme). */
  --pgn-rgg-avatar-position-color: #FFFFFFFF; /** RGG avatar position color. */
  --pgn-rgg-avatar-position-accent-color: #BACBD5FF; /** RGG avatar position accent color. */
  --pgn-rgg-avatar-border-color: #707070FF; /** RGG avatar position border color. */
  --pgn-rgg-avatar-image-bg-gray-color: #CDE4FCFF; /** From RGG chart avatar image background gray color */
  --pgn-rgg-avatar-letter-bg-gray-color: #303030FF; /** From RGG chart avatar letter background gray color */
  --pgn-rgg-btn-logo-dropdown-base-color: #CFCFCFFF; /** RGG button logo dropdown base color (dark theme). */
  --pgn-rgg-quaternary-color: #00ABD9FF; /** From RGG chart quaternary color */
  --pgn-rgg-neutral-gray-color: #BCBCBCFF; /** From RGG chart neutral gray color */
  --pgn-rgg-muted-gray-color: #AAAAAAFF; /** From RGG chart muted gray color */
  --pgn-rgg-medium-gray-color: #6C6D6EFF; /** From RGG chart medium gray color */
  --pgn-rgg-success-green-color: #419E4DFF; /** From RGG chart success green color */
  --pgn-rgg-sky-blue-color: #4599C3FF; /** From RGG chart sky blue color */
  --pgn-rgg-warning-yellow-color: #FFCD00FF; /** From RGG chart warning yellow color */
  --pgn-rgg-orange-accent-color: #E87722FF; /** From RGG chart orange accent color */
  --pgn-rgg-aqua-blue-color: #00B5E2FF; /** From RGG chart aqua blue color */
  --pgn-rgg-purple-accent-color: #6244BBFF; /** From RGG chart purple accent color */
  --pgn-rgg-dark-gray-color: #888B8DFF; /** From RGG chart dark gray color */
  --pgn-rgg-error-red-color: #FF0000FF; /** From RGG chart error red color */
  --pgn-rgg-light-color: #FAFAFAFF; /** From RGG chart light color */
  --pgn-rgg-light-gray-color: #DFE0E8FF; /** From RGG chart light gray color */
  --pgn-rgg-olive-green-color: #556B2FFF; /** From RGG chart olive green color */
  --pgn-rgg-gold-color: #F8B805FF; /** From RGG chart gold color */
  --pgn-rgg-silver-color: #AFBAC7FF; /** From RGG chart silver color */
  --pgn-rgg-bronze-color: #E6814DFF; /** From RGG chart bronze color */
  --pgn-rgg-dashboard-page-corner-border-radius: 1.25rem; /** RGG dashboard page corner border radius. */
  --pgn-rgg-dropdown-item-padding-x: 1.875rem; /** Horizontal padding for RGG dropdown item */
  --pgn-rgg-dropdown-item-padding-y: 0.563rem; /** Vertical padding for RGG dropdown item */
  --pgn-rgg-empty-message-color: #707070FF; /** RGG empty message color. */
  --pgn-rgg-points-vault-img-size: 15.625rem; /** RGG points vault image size. */
  --pgn-rgg-statuses-progress-bg-color: #3A3A3AFF; /** RGG progress status background color (dark theme). */
  --pgn-rgg-statuses-progress-track-bg-color: #556B2FFF; /** RGG progress status track background color. */
  --pgn-rgg-space-20: 1.25rem; /** Spacing size 20 for RGG progress-badge */
  --pgn-rgg-space-30: 1.875rem; /** Spacing size 30 for RGG progress-badge */
  --pgn-spacing-form-input-padding-y-base: var(--pgn-spacing-input-btn-padding-y); /** Base vertical padding for form inputs. Theme-agnostic (mirrors light). */
  --pgn-rg-size-course-card-image-horizontal-width-min: var(--pgn-rg-size-course-card-image-horizontal-width-max);
  --pgn-rg-color-footer-links-social: var(--pgn-rg-color-primary); /** The color of social links in the footer. */
  --pgn-rg-color-footer-links-nav: var(--pgn-rg-color-primary); /** The color of navigation links in the footer (dark theme). */
  --pgn-rg-color-footer-support-text-and-logo: var(--pgn-color-white); /** The color of support text and logo in the footer (dark theme). */
  --pgn-rg-color-header-links-nav: var(--pgn-color-link-base); /** The color of navigation links in the header. */
  --pgn-rg-color-header-btn-bg-primary: var(--pgn-rg-color-primary); /** Primary button background in header (sign in) */
  --pgn-rg-color-header-btn-hover-text: var(--pgn-color-white); /** Button hover text in header */
  --pgn-rg-color-header-hover-links-nav: #86A4E8FF; /** The hover state color for navigation links in the header. */
  --pgn-rg-color-promo-title: var(--pgn-color-white); /** H1 title color on banner */
  --pgn-rg-color-promo-description: var(--pgn-color-white); /** Description color on banner */
  --pgn-rg-color-link: var(--pgn-color-white); /** Dark theme: AA-legible brand-green for links/foreground/borders. The brand #006a00 only reaches ~2.3:1 on the dark surface, so this lightened green (~7.6:1 on the dark surface, AAA) is used for FOREGROUND green; solid-fill brand buttons keep --pgn-rg-color-primary + white text. Hand-tuned for contrast (like --pgn-color-link-hover) — re-tune if the brand hue changes. */
  --pgn-rg-typography-font-family-base: var(--pgn-rg-typography-font-family-sans-serif); /** Basic font family. */
  --pgn-color-link-hover: #CDDDFFFF;
  --pgn-color-link-inline-base: var(--pgn-color-link-base);
  --pgn-color-link-inline-decoration: #80AAFFFF;
  --pgn-color-link-inline-hover-base: var(--pgn-color-link-base);
  --pgn-color-link-inline-hover-decoration: #CDDDFFFF;
  --pgn-color-light-100: #FFFFFF1A; /** Dark theme: light-100 override. */
  --pgn-color-light-200: #FFFFFF33; /** Dark theme: light-200 override. */
  --pgn-color-light-400: #FFFFFF66; /** Dark theme: light-400 override. */
  --pgn-color-light-800: #FFFFFFCC; /** Dark theme: light-800 override. */
  --pgn-color-teal: var(--pgn-rg-color-primary); /** Teal color. */
  --pgn-color-primary-500: var(--pgn-color-link-base); /** Primary color of level 500. */
  --pgn-color-primary-base: var(--pgn-rg-color-primary); /** Basic primary color. */
  --pgn-color-brand-base: var(--pgn-rg-color-primary); /** Basic brand color. */
  --pgn-color-dark-base: var(--pgn-rg-color-primary); /** Basic dark color. */
  --pgn-rgg-primary-color: var(--pgn-rg-color-primary); /** From RGG chart primary color */
  --pgn-rgg-primary-font-family-base: var(--pgn-rg-typography-font-family-sans-serif); /** RGG Basic font family. */
  --pgn-rgg-accent-color: var(--pgn-rg-color-primary); /** The primary RGG color. */
  --pgn-rgg-accent-transparent-bg-color: #4674DC8C; /** The RGG primary transparent background color. */
  --pgn-rg-color-header-btn-hover-bg-primary: #6289E1FF; /** Primary button background hover in header (sign in) */
  --pgn-rg-color-header-btn-hover-bg-outlined-primary: #0E172CFF; /** Outline primary button background in header (register) */
  --pgn-rg-typography-promo-title-desktop: 400 2em/1.4em var(--pgn-rg-typography-font-family-base); /** Promo banner H1 title font size on desktop */
  --pgn-color-card-bg-base: var(--pgn-color-light-100);
  --pgn-color-primary-100: #04070DFF; /** Primary color of level 100. */
  --pgn-color-primary-200: #121D37FF; /** Primary color of level 200. */
  --pgn-color-primary-300: #233A6EFF; /** Primary color of level 300. */
  --pgn-color-primary-400: #3557A5FF; /** Primary color of level 400. */
  --pgn-color-primary-600: #5982E0FF; /** Primary color of level 600. */
  --pgn-color-primary-700: #6B90E3FF; /** Primary color of level 700. */
  --pgn-color-primary-800: #7497E5FF; /** Primary color of level 800. */
  --pgn-color-primary-900: #7E9EE7FF; /** Primary color of level 900. */
  --pgn-color-brand-100: #04070DFF; /** Brand color of level 100. */
  --pgn-color-brand-200: #121D37FF; /** Brand color of level 200. */
  --pgn-color-brand-300: #233A6EFF; /** Brand color of level 300. */
  --pgn-color-brand-400: #3557A5FF; /** Brand color of level 400. */
  --pgn-color-brand-500: var(--pgn-color-brand-base); /** Brand color of level 500. */
  --pgn-color-brand-600: #5982E0FF; /** Brand color of level 600. */
  --pgn-color-brand-700: #6B90E3FF; /** Brand color of level 700. */
  --pgn-color-brand-800: #7497E5FF; /** Brand color of level 800. */
  --pgn-color-brand-900: #7E9EE7FF; /** Brand color of level 900. */
  --pgn-color-dark-100: #04070DFF; /** Dark color of level 100. */
  --pgn-color-dark-200: #121D37FF; /** Dark color of level 200. */
  --pgn-color-dark-300: #233A6EFF; /** Dark color of level 300. */
  --pgn-color-dark-400: #3557A5FF; /** Dark color of level 400. */
  --pgn-color-dark-500: var(--pgn-color-dark-base); /** Dark color of level 500. */
  --pgn-color-dark-600: #5982E0FF; /** Dark color of level 600. */
  --pgn-color-dark-700: #6B90E3FF; /** Dark color of level 700. */
  --pgn-color-dark-800: #7497E5FF; /** Dark color of level 800. */
  --pgn-color-dark-900: #7E9EE7FF; /** Dark color of level 900. */
  --pgn-color-action-default-primary-500: #B3CCFFFF;
  --pgn-color-action-default-primary-base: #7194E4FF;
  --pgn-color-action-default-brand-base: #7194E4FF;
  --pgn-color-action-default-dark-base: #7194E4FF;
  --pgn-rg-typography-promo-title-mobile: var(--pgn-rg-typography-promo-title-desktop); /** Promo banner H1 title font size on mobile */
  --pgn-color-action-default-primary-100: #101C34FF;
  --pgn-color-action-default-primary-200: #1F315DFF;
  --pgn-color-action-default-primary-300: #2F4E95FF;
  --pgn-color-action-default-primary-400: #496EC4FF;
  --pgn-color-action-default-primary-600: #84A2E8FF;
  --pgn-color-action-default-primary-700: #96B0EBFF;
  --pgn-color-action-default-primary-800: #9FB7EDFF;
  --pgn-color-action-default-primary-900: #A9BEEFFF;
  --pgn-color-action-default-brand-100: #101C34FF;
  --pgn-color-action-default-brand-200: #1F315DFF;
  --pgn-color-action-default-brand-300: #2F4E95FF;
  --pgn-color-action-default-brand-400: #496EC4FF;
  --pgn-color-action-default-brand-500: #7194E4FF;
  --pgn-color-action-default-brand-600: #84A2E8FF;
  --pgn-color-action-default-brand-700: #96B0EBFF;
  --pgn-color-action-default-brand-800: #9FB7EDFF;
  --pgn-color-action-default-brand-900: #A9BEEFFF;
  --pgn-color-action-default-dark-100: #101C34FF;
  --pgn-color-action-default-dark-200: #1F315DFF;
  --pgn-color-action-default-dark-300: #2F4E95FF;
  --pgn-color-action-default-dark-400: #496EC4FF;
  --pgn-color-action-default-dark-500: #7194E4FF;
  --pgn-color-action-default-dark-600: #84A2E8FF;
  --pgn-color-action-default-dark-700: #96B0EBFF;
  --pgn-color-action-default-dark-800: #9FB7EDFF;
  --pgn-color-action-default-dark-900: #A9BEEFFF;
}