/* Design Ledger design system tokens for the Learning Center: the same roles as designledger.co (Design Ledger
   inks of the ground, no violet), Roboto self hosted, Inter as an option. The Learning Center is bright by default and dark under
   html[data-theme="dark"], so the light roles sit on :root and the dark roles on the dark theme attribute. The shared header
   bar is dark on both themes, so it carries the dark roles. Keep this file in step with src/design-system/core in the
   Design Ledger repo. */
@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets-dl/fonts/roboto-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets-dl/fonts/roboto-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets-dl/fonts/roboto-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets-dl/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets-dl/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets-dl/fonts/inter-latin-700-normal.woff2') format('woff2'); }
html[data-font="inter"] { --dl-typeface-brand: Inter; --dl-typeface-plain: Inter; }

/* Design system tokens. Design Ledger is dark by default; the light roles apply only under .light-mode.
   Base: baseline tokens (v0_192), colour scheme generated with a colour engine (origin and licence in NOTICE)
   (tonal spot). Every colour role is neutral, black to white: primary, secondary and tertiary are inks of
   the ground, never violet. Customise here only; every component reads these variables. */

:root {
  --dl-typeface-brand: Roboto;
  --dl-typeface-plain: Roboto;
  --dl-typeface-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --dl-typeface-weight-bold: 700;
  --dl-typeface-weight-medium: 500;
  --dl-typeface-weight-regular: 400;
  --dl-typescale-body-large-font: var(--dl-typeface-plain);
  --dl-typescale-body-large-line-height: 1.5rem;
  --dl-typescale-body-large-size: 1rem;
  --dl-typescale-body-large-tracking: 0.03125rem;
  --dl-typescale-body-large-weight: 400;
  --dl-typescale-body-medium-font: var(--dl-typeface-plain);
  --dl-typescale-body-medium-line-height: 1.25rem;
  --dl-typescale-body-medium-size: 0.875rem;
  --dl-typescale-body-medium-tracking: 0.015625rem;
  --dl-typescale-body-medium-weight: 400;
  --dl-typescale-body-small-font: var(--dl-typeface-plain);
  --dl-typescale-body-small-line-height: 1rem;
  --dl-typescale-body-small-size: 0.75rem;
  --dl-typescale-body-small-tracking: 0.025rem;
  --dl-typescale-body-small-weight: 400;
  --dl-typescale-display-large-font: var(--dl-typeface-brand);
  --dl-typescale-display-large-line-height: 4rem;
  --dl-typescale-display-large-size: 3.5625rem;
  --dl-typescale-display-large-tracking: -0.015625rem;
  --dl-typescale-display-large-weight: 400;
  --dl-typescale-display-medium-font: var(--dl-typeface-brand);
  --dl-typescale-display-medium-line-height: 3.25rem;
  --dl-typescale-display-medium-size: 2.8125rem;
  --dl-typescale-display-medium-tracking: 0rem;
  --dl-typescale-display-medium-weight: 400;
  --dl-typescale-display-small-font: var(--dl-typeface-brand);
  --dl-typescale-display-small-line-height: 2.75rem;
  --dl-typescale-display-small-size: 2.25rem;
  --dl-typescale-display-small-tracking: 0rem;
  --dl-typescale-display-small-weight: 400;
  --dl-typescale-headline-large-font: var(--dl-typeface-brand);
  --dl-typescale-headline-large-line-height: 2.5rem;
  --dl-typescale-headline-large-size: 2rem;
  --dl-typescale-headline-large-tracking: 0rem;
  --dl-typescale-headline-large-weight: 400;
  --dl-typescale-headline-medium-font: var(--dl-typeface-brand);
  --dl-typescale-headline-medium-line-height: 2.25rem;
  --dl-typescale-headline-medium-size: 1.75rem;
  --dl-typescale-headline-medium-tracking: 0rem;
  --dl-typescale-headline-medium-weight: 400;
  --dl-typescale-headline-small-font: var(--dl-typeface-brand);
  --dl-typescale-headline-small-line-height: 2rem;
  --dl-typescale-headline-small-size: 1.5rem;
  --dl-typescale-headline-small-tracking: 0rem;
  --dl-typescale-headline-small-weight: 400;
  --dl-typescale-label-large-font: var(--dl-typeface-plain);
  --dl-typescale-label-large-line-height: 1.25rem;
  --dl-typescale-label-large-size: 0.875rem;
  --dl-typescale-label-large-tracking: 0.00625rem;
  --dl-typescale-label-large-weight: 500;
  --dl-typescale-label-large-weight-prominent: 700;
  --dl-typescale-label-medium-font: var(--dl-typeface-plain);
  --dl-typescale-label-medium-line-height: 1rem;
  --dl-typescale-label-medium-size: 0.75rem;
  --dl-typescale-label-medium-tracking: 0.03125rem;
  --dl-typescale-label-medium-weight: 500;
  --dl-typescale-label-medium-weight-prominent: 700;
  --dl-typescale-label-small-font: var(--dl-typeface-plain);
  --dl-typescale-label-small-line-height: 1rem;
  --dl-typescale-label-small-size: 0.6875rem;
  --dl-typescale-label-small-tracking: 0.03125rem;
  --dl-typescale-label-small-weight: 500;
  --dl-typescale-title-large-font: var(--dl-typeface-brand);
  --dl-typescale-title-large-line-height: 1.75rem;
  --dl-typescale-title-large-size: 1.375rem;
  --dl-typescale-title-large-tracking: 0rem;
  --dl-typescale-title-large-weight: 400;
  --dl-typescale-title-medium-font: var(--dl-typeface-brand);
  --dl-typescale-title-medium-line-height: 1.5rem;
  --dl-typescale-title-medium-size: 1rem;
  --dl-typescale-title-medium-tracking: 0.009375rem;
  --dl-typescale-title-medium-weight: 500;
  --dl-typescale-title-small-font: var(--dl-typeface-brand);
  --dl-typescale-title-small-line-height: 1.25rem;
  --dl-typescale-title-small-size: 0.875rem;
  --dl-typescale-title-small-tracking: 0.00625rem;
  --dl-typescale-title-small-weight: 500;
  --dl-shape-corner-extra-large: 28px;
  --dl-shape-corner-extra-large-top: 28px 28px 0px 0px;
  --dl-shape-corner-extra-small: 4px;
  --dl-shape-corner-extra-small-top: 4px 4px 0px 0px;
  --dl-shape-corner-full: 9999px;
  --dl-shape-corner-large: 16px;
  --dl-shape-corner-large-end: 0px 16px 16px 0px;
  --dl-shape-corner-large-start: 16px 0px 0px 16px;
  --dl-shape-corner-large-top: 16px 16px 0px 0px;
  --dl-shape-corner-medium: 12px;
  --dl-shape-corner-none: 0px;
  --dl-shape-corner-small: 8px;
  --dl-state-dragged-state-layer-opacity: 0.16;
  --dl-state-focus-state-layer-opacity: 0.12;
  --dl-state-hover-state-layer-opacity: 0.08;
  --dl-state-pressed-state-layer-opacity: 0.12;
  --dl-motion-duration-extra-long1: 700ms;
  --dl-motion-duration-extra-long2: 800ms;
  --dl-motion-duration-extra-long3: 900ms;
  --dl-motion-duration-extra-long4: 1000ms;
  --dl-motion-duration-long1: 450ms;
  --dl-motion-duration-long2: 500ms;
  --dl-motion-duration-long3: 550ms;
  --dl-motion-duration-long4: 600ms;
  --dl-motion-duration-medium1: 250ms;
  --dl-motion-duration-medium2: 300ms;
  --dl-motion-duration-medium3: 350ms;
  --dl-motion-duration-medium4: 400ms;
  --dl-motion-duration-short1: 50ms;
  --dl-motion-duration-short2: 100ms;
  --dl-motion-duration-short3: 150ms;
  --dl-motion-duration-short4: 200ms;
  --dl-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --dl-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --dl-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --dl-motion-easing-legacy: cubic-bezier(0.4, 0, 0.2, 1);
  --dl-motion-easing-legacy-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --dl-motion-easing-legacy-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --dl-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
  --dl-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --dl-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --dl-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --dl-elevation-level0: none;
  --dl-elevation-level1: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 1px 3px 1px rgb(0 0 0 / 0.15);
  --dl-elevation-level2: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 2px 6px 2px rgb(0 0 0 / 0.15);
  --dl-elevation-level3: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 4px 8px 3px rgb(0 0 0 / 0.15);
  --dl-elevation-level4: 0 2px 3px 0 rgb(0 0 0 / 0.3), 0 6px 10px 4px rgb(0 0 0 / 0.15);
  --dl-elevation-level5: 0 4px 4px 0 rgb(0 0 0 / 0.3), 0 8px 12px 6px rgb(0 0 0 / 0.15);
  --dl-focus-ring-width: 3px;
  --dl-focus-ring-outward-offset: 2px;
}


/* Design Ledger site tokens, mirrored from src/design-system/tokens.css on designledger.co. */
:root {
  --dl-button-height: 44px;
  --dl-target-size: 44px;
  /* Two display steps above display large, for the hero headlines and the large numerals. */
  --dl-typescale-display-xl-size: 4.5rem;
  --dl-typescale-display-2xl-size: 7rem;
  /* Tier and status colours carry meaning. On the bright ground the tiers take their deeper values, as on designledger.co;
     the dark scheme below keeps the bright ones. */
  --dl-tier-seed: #047857;
  --dl-tier-bloom: #2563eb;
  --dl-tier-root: var(--dl-color-primary);
  --dl-tier-sovereign: #be123c;
  --dl-tier-architect: #b45309;
  --dl-rgbs-tier-seed: 4 120 87;
  --dl-rgbs-tier-bloom: 37 99 235;
  --dl-rgbs-tier-sovereign: 190 18 60;
  --dl-rgbs-tier-architect: 180 83 9;
  --dl-status-success: #10b981;
  --dl-status-warning: #fbbf24;
  --dl-status-error: #ef4444;
  --dl-status-info: #60a5fa;
  --dl-rgbs-status-success: 16 185 129;
  --dl-rgbs-status-warning: 251 191 36;
  --dl-rgbs-status-error: 239 68 68;
  --dl-rgbs-status-info: 96 165 250;
}

/* The shared navigation reads these on both sites; the bar, its menu and the footer follow the theme, fully black or fully white. */
.dl-top, .dl-drawer {
  --dl-navigation-height: 80px;
  --dl-navigation-compact-height: 64px;
  --dl-navigation-control-size: 44px;
  --dl-navigation-radius: var(--dl-shape-corner-small);
  --dl-navigation-bg: var(--dl-color-surface-container-lowest);
  --dl-navigation-surface: var(--dl-color-surface-container);
  --dl-navigation-text: var(--dl-color-on-surface);
  --dl-navigation-muted: var(--dl-color-on-surface-variant);
  --dl-navigation-accent: var(--dl-color-on-surface);
  --dl-navigation-primary: var(--dl-color-primary);
  --dl-navigation-primary-hover: var(--dl-color-primary);
}


/* Dark scheme */
html[data-theme="dark"], .dark-mode, .lx-boot {
  --dl-color-background: #080a0c;
  --dl-color-on-background: #e2e2e2;
  --dl-color-surface: #080a0c;
  --dl-color-surface-dim: #080a0c;
  --dl-color-surface-bright: #393939;
  --dl-color-surface-container-lowest: #080a0c;
  --dl-color-surface-container-low: #1c1c1c;
  --dl-color-surface-container: #202020;
  --dl-color-surface-container-high: #2a2a2a;
  --dl-color-surface-container-highest: #353535;
  --dl-color-on-surface: #e2e2e2;
  --dl-color-surface-variant: #474747;
  --dl-color-on-surface-variant: #c6c6c6;
  --dl-color-inverse-surface: #e2e2e2;
  --dl-color-inverse-on-surface: #303030;
  --dl-color-outline: #919191;
  --dl-color-outline-variant: #474747;
  --dl-color-shadow: #000000;
  --dl-color-scrim: #000000;
  --dl-color-surface-tint: #555555;
  --dl-color-primary: #f1f1f1;
  --dl-color-on-primary: #1b1b1b;
  --dl-color-primary-container: #212121;
  --dl-color-on-primary-container: #e2e2e2;
  --dl-color-inverse-primary: #1b1b1b;
  --dl-color-secondary: #c6c6c6;
  --dl-color-on-secondary: #1b1b1b;
  --dl-color-secondary-container: #444444;
  --dl-color-on-secondary-container: #e2e2e2;
  --dl-color-tertiary: #c6c6c6;
  --dl-color-on-tertiary: #1b1b1b;
  --dl-color-tertiary-container: #454545;
  --dl-color-on-tertiary-container: #e2e2e2;
  --dl-color-error: #ffb4ab;
  --dl-color-on-error: #690005;
  --dl-color-error-container: #93000a;
  --dl-color-on-error-container: #ffdad6;
  --dl-color-primary-fixed: #e2e2e2;
  --dl-color-primary-fixed-dim: #c6c6c6;
  --dl-color-on-primary-fixed: #1b1b1b;
  --dl-color-on-primary-fixed-variant: #474747;
  --dl-color-secondary-fixed: #e2e2e2;
  --dl-color-secondary-fixed-dim: #c6c6c6;
  --dl-color-on-secondary-fixed: #1b1b1b;
  --dl-color-on-secondary-fixed-variant: #474747;
  --dl-color-tertiary-fixed: #e2e2e2;
  --dl-color-tertiary-fixed-dim: #c6c6c6;
  --dl-color-on-tertiary-fixed: #1b1b1b;
  --dl-color-on-tertiary-fixed-variant: #474747;
}

/* The tier marks on the dark ground, and on a dark island inside a bright page, as on designledger.co. */
html[data-theme="dark"], .dark-mode, .lx-boot {
  --dl-tier-seed: #34d399;
  --dl-tier-bloom: #60a5fa;
  --dl-tier-sovereign: #fb7185;
  --dl-tier-architect: #fbbf24;
  --dl-rgbs-tier-seed: 52 211 153;
  --dl-rgbs-tier-bloom: 96 165 250;
  --dl-rgbs-tier-sovereign: 251 113 133;
  --dl-rgbs-tier-architect: 251 191 36;
}

/* Role colours as rgb triplets, for alpha use: rgb(var(--dl-rgbs-on-surface) / 0.1) */
html[data-theme="dark"], .dark-mode, .lx-boot {
  --dl-rgbc-background: 8, 10, 12;
  --dl-rgbs-background: 8 10 12;
  --dl-rgbc-on-background: 226, 226, 226;
  --dl-rgbs-on-background: 226 226 226;
  --dl-rgbc-surface: 8, 10, 12;
  --dl-rgbs-surface: 8 10 12;
  --dl-rgbc-surface-dim: 8, 10, 12;
  --dl-rgbs-surface-dim: 8 10 12;
  --dl-rgbc-surface-bright: 57, 57, 57;
  --dl-rgbs-surface-bright: 57 57 57;
  --dl-rgbc-surface-container-lowest: 8, 10, 12;
  --dl-rgbs-surface-container-lowest: 8 10 12;
  --dl-rgbc-surface-container-low: 28, 28, 28;
  --dl-rgbs-surface-container-low: 28 28 28;
  --dl-rgbc-surface-container: 32, 32, 32;
  --dl-rgbs-surface-container: 32 32 32;
  --dl-rgbc-surface-container-high: 42, 42, 42;
  --dl-rgbs-surface-container-high: 42 42 42;
  --dl-rgbc-surface-container-highest: 53, 53, 53;
  --dl-rgbs-surface-container-highest: 53 53 53;
  --dl-rgbc-on-surface: 226, 226, 226;
  --dl-rgbs-on-surface: 226 226 226;
  --dl-rgbc-surface-variant: 71, 71, 71;
  --dl-rgbs-surface-variant: 71 71 71;
  --dl-rgbc-on-surface-variant: 198, 198, 198;
  --dl-rgbs-on-surface-variant: 198 198 198;
  --dl-rgbc-inverse-surface: 226, 226, 226;
  --dl-rgbs-inverse-surface: 226 226 226;
  --dl-rgbc-inverse-on-surface: 48, 48, 48;
  --dl-rgbs-inverse-on-surface: 48 48 48;
  --dl-rgbc-outline: 145, 145, 145;
  --dl-rgbs-outline: 145 145 145;
  --dl-rgbc-outline-variant: 71, 71, 71;
  --dl-rgbs-outline-variant: 71 71 71;
  --dl-rgbc-shadow: 0, 0, 0;
  --dl-rgbs-shadow: 0 0 0;
  --dl-rgbc-scrim: 0, 0, 0;
  --dl-rgbs-scrim: 0 0 0;
  --dl-rgbc-surface-tint: 85, 85, 85;
  --dl-rgbs-surface-tint: 85 85 85;
  --dl-rgbc-primary: 241, 241, 241;
  --dl-rgbs-primary: 241 241 241;
  --dl-rgbc-on-primary: 27, 27, 27;
  --dl-rgbs-on-primary: 27 27 27;
  --dl-rgbc-primary-container: 33, 33, 33;
  --dl-rgbs-primary-container: 33 33 33;
  --dl-rgbc-on-primary-container: 226, 226, 226;
  --dl-rgbs-on-primary-container: 226 226 226;
  --dl-rgbc-inverse-primary: 27, 27, 27;
  --dl-rgbs-inverse-primary: 27 27 27;
  --dl-rgbc-secondary: 198, 198, 198;
  --dl-rgbs-secondary: 198 198 198;
  --dl-rgbc-on-secondary: 27, 27, 27;
  --dl-rgbs-on-secondary: 27 27 27;
  --dl-rgbc-secondary-container: 68, 68, 68;
  --dl-rgbs-secondary-container: 68 68 68;
  --dl-rgbc-on-secondary-container: 226, 226, 226;
  --dl-rgbs-on-secondary-container: 226 226 226;
  --dl-rgbc-tertiary: 198, 198, 198;
  --dl-rgbs-tertiary: 198 198 198;
  --dl-rgbc-on-tertiary: 27, 27, 27;
  --dl-rgbs-on-tertiary: 27 27 27;
  --dl-rgbc-tertiary-container: 69, 69, 69;
  --dl-rgbs-tertiary-container: 69 69 69;
  --dl-rgbc-on-tertiary-container: 226, 226, 226;
  --dl-rgbs-on-tertiary-container: 226 226 226;
  --dl-rgbc-error: 255, 180, 171;
  --dl-rgbs-error: 255 180 171;
  --dl-rgbc-on-error: 105, 0, 5;
  --dl-rgbs-on-error: 105 0 5;
  --dl-rgbc-error-container: 147, 0, 10;
  --dl-rgbs-error-container: 147 0 10;
  --dl-rgbc-on-error-container: 255, 218, 214;
  --dl-rgbs-on-error-container: 255 218 214;
  --dl-rgbc-primary-fixed: 226, 226, 226;
  --dl-rgbs-primary-fixed: 226 226 226;
  --dl-rgbc-primary-fixed-dim: 198, 198, 198;
  --dl-rgbs-primary-fixed-dim: 198 198 198;
  --dl-rgbc-on-primary-fixed: 27, 27, 27;
  --dl-rgbs-on-primary-fixed: 27 27 27;
  --dl-rgbc-on-primary-fixed-variant: 71, 71, 71;
  --dl-rgbs-on-primary-fixed-variant: 71 71 71;
  --dl-rgbc-secondary-fixed: 226, 226, 226;
  --dl-rgbs-secondary-fixed: 226 226 226;
  --dl-rgbc-secondary-fixed-dim: 198, 198, 198;
  --dl-rgbs-secondary-fixed-dim: 198 198 198;
  --dl-rgbc-on-secondary-fixed: 27, 27, 27;
  --dl-rgbs-on-secondary-fixed: 27 27 27;
  --dl-rgbc-on-secondary-fixed-variant: 71, 71, 71;
  --dl-rgbs-on-secondary-fixed-variant: 71 71 71;
  --dl-rgbc-tertiary-fixed: 226, 226, 226;
  --dl-rgbs-tertiary-fixed: 226 226 226;
  --dl-rgbc-tertiary-fixed-dim: 198, 198, 198;
  --dl-rgbs-tertiary-fixed-dim: 198 198 198;
  --dl-rgbc-on-tertiary-fixed: 27, 27, 27;
  --dl-rgbs-on-tertiary-fixed: 27 27 27;
  --dl-rgbc-on-tertiary-fixed-variant: 71, 71, 71;
  --dl-rgbs-on-tertiary-fixed-variant: 71 71 71;
}

/* Light scheme */
:root:not([data-theme="dark"]), [data-theme="light"], .light-mode,
.lx-banners:not(.lx-banners--cards) .lx-banner__cta, .lc-bootcamp-results:not(.lx-banners--cards) .lx-banner__cta, .lx-cohort-grid.is-list .lx-cohort-card__go {
  --dl-color-background: #f9f9f9;
  --dl-color-on-background: #1c1c1c;
  --dl-color-surface: #f9f9f9;
  --dl-color-surface-dim: #dadada;
  --dl-color-surface-bright: #f9f9f9;
  --dl-color-surface-container-lowest: #ffffff;
  --dl-color-surface-container-low: #f3f3f3;
  --dl-color-surface-container: #eeeeee;
  --dl-color-surface-container-high: #e8e8e8;
  --dl-color-surface-container-highest: #e2e2e2;
  --dl-color-on-surface: #1c1c1c;
  --dl-color-surface-variant: #e2e2e2;
  --dl-color-on-surface-variant: #474747;
  --dl-color-inverse-surface: #303030;
  --dl-color-inverse-on-surface: #f1f1f1;
  --dl-color-outline: #737373;
  --dl-color-outline-variant: #c6c6c6;
  --dl-color-shadow: #000000;
  --dl-color-scrim: #000000;
  --dl-color-surface-tint: #555555;
  --dl-color-primary: #1b1b1b;
  --dl-color-on-primary: #ffffff;
  --dl-color-primary-container: #e2e2e2;
  --dl-color-on-primary-container: #212121;
  --dl-color-inverse-primary: #c6c6c6;
  --dl-color-secondary: #474747;
  --dl-color-on-secondary: #ffffff;
  --dl-color-secondary-container: #e2e2e2;
  --dl-color-on-secondary-container: #444444;
  --dl-color-tertiary: #474747;
  --dl-color-on-tertiary: #ffffff;
  --dl-color-tertiary-container: #e2e2e2;
  --dl-color-on-tertiary-container: #454545;
  --dl-color-error: #ba1a1a;
  --dl-color-on-error: #ffffff;
  --dl-color-error-container: #ffdad6;
  --dl-color-on-error-container: #93000a;
  --dl-color-primary-fixed: #e2e2e2;
  --dl-color-primary-fixed-dim: #c6c6c6;
  --dl-color-on-primary-fixed: #1b1b1b;
  --dl-color-on-primary-fixed-variant: #474747;
  --dl-color-secondary-fixed: #e2e2e2;
  --dl-color-secondary-fixed-dim: #c6c6c6;
  --dl-color-on-secondary-fixed: #1b1b1b;
  --dl-color-on-secondary-fixed-variant: #474747;
  --dl-color-tertiary-fixed: #e2e2e2;
  --dl-color-tertiary-fixed-dim: #c6c6c6;
  --dl-color-on-tertiary-fixed: #1b1b1b;
  --dl-color-on-tertiary-fixed-variant: #474747;
}

/* Light role triplets */
:root:not([data-theme="dark"]), [data-theme="light"], .light-mode,
.lx-banners:not(.lx-banners--cards) .lx-banner__cta, .lc-bootcamp-results:not(.lx-banners--cards) .lx-banner__cta, .lx-cohort-grid.is-list .lx-cohort-card__go {
  --dl-rgbc-background: 249, 249, 249;
  --dl-rgbs-background: 249 249 249;
  --dl-rgbc-on-background: 28, 28, 28;
  --dl-rgbs-on-background: 28 28 28;
  --dl-rgbc-surface: 249, 249, 249;
  --dl-rgbs-surface: 249 249 249;
  --dl-rgbc-surface-dim: 218, 218, 218;
  --dl-rgbs-surface-dim: 218 218 218;
  --dl-rgbc-surface-bright: 249, 249, 249;
  --dl-rgbs-surface-bright: 249 249 249;
  --dl-rgbc-surface-container-lowest: 255, 255, 255;
  --dl-rgbs-surface-container-lowest: 255 255 255;
  --dl-rgbc-surface-container-low: 243, 243, 243;
  --dl-rgbs-surface-container-low: 243 243 243;
  --dl-rgbc-surface-container: 238, 238, 238;
  --dl-rgbs-surface-container: 238 238 238;
  --dl-rgbc-surface-container-high: 232, 232, 232;
  --dl-rgbs-surface-container-high: 232 232 232;
  --dl-rgbc-surface-container-highest: 226, 226, 226;
  --dl-rgbs-surface-container-highest: 226 226 226;
  --dl-rgbc-on-surface: 28, 28, 28;
  --dl-rgbs-on-surface: 28 28 28;
  --dl-rgbc-surface-variant: 226, 226, 226;
  --dl-rgbs-surface-variant: 226 226 226;
  --dl-rgbc-on-surface-variant: 71, 71, 71;
  --dl-rgbs-on-surface-variant: 71 71 71;
  --dl-rgbc-inverse-surface: 48, 48, 48;
  --dl-rgbs-inverse-surface: 48 48 48;
  --dl-rgbc-inverse-on-surface: 241, 241, 241;
  --dl-rgbs-inverse-on-surface: 241 241 241;
  --dl-rgbc-outline: 115, 115, 115;
  --dl-rgbs-outline: 115 115 115;
  --dl-rgbc-outline-variant: 198, 198, 198;
  --dl-rgbs-outline-variant: 198 198 198;
  --dl-rgbc-shadow: 0, 0, 0;
  --dl-rgbs-shadow: 0 0 0;
  --dl-rgbc-scrim: 0, 0, 0;
  --dl-rgbs-scrim: 0 0 0;
  --dl-rgbc-surface-tint: 85, 85, 85;
  --dl-rgbs-surface-tint: 85 85 85;
  --dl-rgbc-primary: 27, 27, 27;
  --dl-rgbs-primary: 27 27 27;
  --dl-rgbc-on-primary: 255, 255, 255;
  --dl-rgbs-on-primary: 255 255 255;
  --dl-rgbc-primary-container: 226, 226, 226;
  --dl-rgbs-primary-container: 226 226 226;
  --dl-rgbc-on-primary-container: 33, 33, 33;
  --dl-rgbs-on-primary-container: 33 33 33;
  --dl-rgbc-inverse-primary: 198, 198, 198;
  --dl-rgbs-inverse-primary: 198 198 198;
  --dl-rgbc-secondary: 71, 71, 71;
  --dl-rgbs-secondary: 71 71 71;
  --dl-rgbc-on-secondary: 255, 255, 255;
  --dl-rgbs-on-secondary: 255 255 255;
  --dl-rgbc-secondary-container: 226, 226, 226;
  --dl-rgbs-secondary-container: 226 226 226;
  --dl-rgbc-on-secondary-container: 68, 68, 68;
  --dl-rgbs-on-secondary-container: 68 68 68;
  --dl-rgbc-tertiary: 71, 71, 71;
  --dl-rgbs-tertiary: 71 71 71;
  --dl-rgbc-on-tertiary: 255, 255, 255;
  --dl-rgbs-on-tertiary: 255 255 255;
  --dl-rgbc-tertiary-container: 226, 226, 226;
  --dl-rgbs-tertiary-container: 226 226 226;
  --dl-rgbc-on-tertiary-container: 69, 69, 69;
  --dl-rgbs-on-tertiary-container: 69 69 69;
  --dl-rgbc-error: 186, 26, 26;
  --dl-rgbs-error: 186 26 26;
  --dl-rgbc-on-error: 255, 255, 255;
  --dl-rgbs-on-error: 255 255 255;
  --dl-rgbc-error-container: 255, 218, 214;
  --dl-rgbs-error-container: 255 218 214;
  --dl-rgbc-on-error-container: 147, 0, 10;
  --dl-rgbs-on-error-container: 147 0 10;
  --dl-rgbc-primary-fixed: 226, 226, 226;
  --dl-rgbs-primary-fixed: 226 226 226;
  --dl-rgbc-primary-fixed-dim: 198, 198, 198;
  --dl-rgbs-primary-fixed-dim: 198 198 198;
  --dl-rgbc-on-primary-fixed: 27, 27, 27;
  --dl-rgbs-on-primary-fixed: 27 27 27;
  --dl-rgbc-on-primary-fixed-variant: 71, 71, 71;
  --dl-rgbs-on-primary-fixed-variant: 71 71 71;
  --dl-rgbc-secondary-fixed: 226, 226, 226;
  --dl-rgbs-secondary-fixed: 226 226 226;
  --dl-rgbc-secondary-fixed-dim: 198, 198, 198;
  --dl-rgbs-secondary-fixed-dim: 198 198 198;
  --dl-rgbc-on-secondary-fixed: 27, 27, 27;
  --dl-rgbs-on-secondary-fixed: 27 27 27;
  --dl-rgbc-on-secondary-fixed-variant: 71, 71, 71;
  --dl-rgbs-on-secondary-fixed-variant: 71 71 71;
  --dl-rgbc-tertiary-fixed: 226, 226, 226;
  --dl-rgbs-tertiary-fixed: 226 226 226;
  --dl-rgbc-tertiary-fixed-dim: 198, 198, 198;
  --dl-rgbs-tertiary-fixed-dim: 198 198 198;
  --dl-rgbc-on-tertiary-fixed: 27, 27, 27;
  --dl-rgbs-on-tertiary-fixed: 27 27 27;
  --dl-rgbc-on-tertiary-fixed-variant: 71, 71, 71;
  --dl-rgbs-on-tertiary-fixed-variant: 71 71 71;
}

/* Call to action inks. Light is the white pill for dark grounds and pictures; ink is the black pill for bright grounds. */
:root{--dl-btn-light-bg:var(--dl-ink-white);--dl-btn-light-fg:color-mix(in srgb, var(--dl-color-scrim) 88%, var(--dl-ink-white));--dl-btn-light-hover:color-mix(in srgb, var(--dl-ink-white) 88%, var(--dl-color-scrim));--dl-btn-ink-bg:color-mix(in srgb, var(--dl-color-scrim) 88%, var(--dl-ink-white));--dl-btn-ink-fg:var(--dl-ink-white);--dl-btn-ink-hover:var(--dl-color-scrim)}

/* The selected item in any menu, list or filter: solid white on dark grounds, solid black on bright ones. */
:root, [data-theme="light"], [data-theme="bright"], .light-mode { --dl-select-bg: #000000; --dl-select-fg: #ffffff; }
html[data-theme="dark"], [data-theme="dark"], .dark-mode { --dl-select-bg: #ffffff; --dl-select-fg: #000000; }

/* Constant inks and their rgb triplets: the same on every ground, for overlays and strokes that do not flip with the theme. */
:root{--dl-ink-white:#ffffff;--dl-ink-black:#000000;--dl-ink-ground:#080a0c;--dl-rgbs-ground:8 10 12;--dl-ink-near-black:#0a0a0a;--dl-rgbs-white:255 255 255;--dl-rgbs-black:0 0 0;--dl-rgbs-near-black:10 10 10}

/* The five course colours and the page column, as in the Design Ledger tokens (ruled 7 Nov, for the shared menus). */
:root{--dl-course-causal:#097244;--dl-course-symbiotic:#df1d1f;--dl-course-meaning:#0e49c2;--dl-course-runtime:#6222ba;--dl-course-sovereign:#c9a800;--dl-page-max:1440px;--dl-page-gutter:clamp(24px,4vw,56px);--dl-page-edge:max(var(--dl-page-gutter),calc((100vw - var(--dl-sbw,0px) - var(--dl-page-max)) / 2 + var(--dl-page-gutter)))}
@media (max-width:700px){:root{--dl-page-gutter:16px}}