/*!
 * STEP IT Academy — Design Tokens v1.0
 * Generated from the STEP Logo Guideline (PDF) + proposed UI foundations.
 * Do not edit by hand: regenerate from the token source.
 */

:root {
  /* Brand colours — PDF p.4 */
  --step-brand-blue: #0024C1;
  --step-brand-blue-deep: #17316C;
  --step-brand-white: #FFFFFF;
  --step-brand-black: #141414;
  /* Print equivalents (HEX preview of CMYK) — PDF p.4 */
  --step-brand-blue-print: #31469D;
  --step-brand-blue-deep-print: #23356B;

  /* Tonal scales — proposed */
  --step-blue-50: #F1F5FE;
  --step-blue-100: #DFEAFE;
  --step-blue-200: #BFD5FF;
  --step-blue-300: #94B7FF;
  --step-blue-400: #5E8FFE;
  --step-blue-500: #2C65F5;
  --step-blue-600: #0F43DC;
  --step-blue-700: #0024C1;
  --step-blue-800: #00199A;
  --step-blue-900: #01176C;
  --step-blue-950: #010F48;
  --step-green-50: #EAFAF0;
  --step-green-100: #D5F2DF;
  --step-green-200: #ACE4C1;
  --step-green-300: #00CC7E;
  --step-green-400: #32AF72;
  --step-green-500: #00904A;
  --step-green-600: #00752E;
  --step-green-700: #005E17;
  --step-green-800: #00490F;
  --step-green-900: #00340D;
  --step-green-950: #002208;
  --step-amber-50: #FDF4E6;
  --step-amber-100: #F7E7CE;
  --step-amber-200: #EED09F;
  --step-amber-300: #FFB600;
  --step-amber-400: #C18A0C;
  --step-amber-500: #A56500;
  --step-amber-600: #8B4800;
  --step-amber-700: #733100;
  --step-amber-800: #5A2400;
  --step-amber-900: #401C00;
  --step-amber-950: #2A1100;
  --step-rose-50: #FEF2F3;
  --step-rose-100: #FEE1E4;
  --step-rose-200: #FEC2C8;
  --step-rose-300: #FF93A1;
  --step-rose-400: #F23064;
  --step-rose-500: #D31652;
  --step-rose-600: #B70037;
  --step-rose-700: #9B0023;
  --step-rose-800: #7A0019;
  --step-rose-900: #570013;
  --step-rose-950: #3A000B;
  --step-sky-50: #EDF6FF;
  --step-sky-100: #D9ECFF;
  --step-sky-200: #B1D9FE;
  --step-sky-300: #7BBEF9;
  --step-sky-400: #06A0FF;
  --step-sky-500: #0079CF;
  --step-sky-600: #005CB6;
  --step-sky-700: #00449D;
  --step-sky-800: #00347C;
  --step-sky-900: #002757;
  --step-sky-950: #00193A;
  --step-neutral-0: #FFFFFF;
  --step-neutral-50: #F5F5F7;
  --step-neutral-100: #EDEDF0;
  --step-neutral-200: #E2E2E7;
  --step-neutral-300: #CDCDD4;
  --step-neutral-400: #A1A1A8;
  --step-neutral-500: #86868B;
  --step-neutral-600: #63636D;
  --step-neutral-700: #48484F;
  --step-neutral-800: #2C2C31;
  --step-neutral-900: #1D1D1F;
  --step-neutral-950: #141414;

  /* Course accent palette — PDF p.21-28 */
  --step-accent-cobalt: #0042E8;
  --step-accent-orange: #FF6700;
  --step-accent-amber: #FFB600;
  --step-accent-violet: #5700FF;
  --step-accent-green: #00CC7E;
  --step-accent-purple: #7C00FF;
  --step-accent-teal: #00E2B7;
  --step-accent-yellow: #FFD00B;
  --step-accent-pink: #E84AFF;
  --step-accent-sky: #06A0FF;
  --step-accent-navy: #00258C;
  --step-accent-rose: #F23064;
  --step-accent-cyan: #25DAF2;
  --step-accent-sun: #FFDC10;
  --step-accent-coral: #FF4633;

  /* Typography */
  --step-font-sans: 'FiraGO', 'STEP Mtavruli', 'Noto Sans Georgian', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --step-font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --step-weight-light: 300;
  --step-weight-regular: 400;
  --step-weight-medium: 500;
  --step-weight-semibold: 600;
  --step-weight-bold: 700;
  --step-text-display-1: 700 64px/76px var(--step-font-sans);
  --step-text-display-1-size: 64px;
  --step-text-display-1-line: 76px;
  --step-text-display-1-tracking: -0.02em;
  --step-text-display-2: 700 48px/58px var(--step-font-sans);
  --step-text-display-2-size: 48px;
  --step-text-display-2-line: 58px;
  --step-text-display-2-tracking: -0.015em;
  --step-text-display-light: 300 56px/64px var(--step-font-sans);
  --step-text-display-light-size: 56px;
  --step-text-display-light-line: 64px;
  --step-text-display-light-tracking: -0.02em;
  --step-text-h1: 700 36px/44px var(--step-font-sans);
  --step-text-h1-size: 36px;
  --step-text-h1-line: 44px;
  --step-text-h1-tracking: -0.01em;
  --step-text-h2: 600 30px/36px var(--step-font-sans);
  --step-text-h2-size: 30px;
  --step-text-h2-line: 36px;
  --step-text-h2-tracking: -0.005em;
  --step-text-h3: 700 22px/30px var(--step-font-sans);
  --step-text-h3-size: 22px;
  --step-text-h3-line: 30px;
  --step-text-h4: 500 20px/26px var(--step-font-sans);
  --step-text-h4-size: 20px;
  --step-text-h4-line: 26px;
  --step-text-body-lg: 400 18px/27px var(--step-font-sans);
  --step-text-body-lg-size: 18px;
  --step-text-body-lg-line: 27px;
  --step-text-body: 400 16px/26px var(--step-font-sans);
  --step-text-body-size: 16px;
  --step-text-body-line: 26px;
  --step-text-body-sm: 400 14px/22px var(--step-font-sans);
  --step-text-body-sm-size: 14px;
  --step-text-body-sm-line: 22px;
  --step-text-label: 500 14px/20px var(--step-font-sans);
  --step-text-label-size: 14px;
  --step-text-label-line: 20px;
  --step-text-caption: 400 12px/16px var(--step-font-sans);
  --step-text-caption-size: 12px;
  --step-text-caption-line: 16px;
  --step-text-overline: 700 12px/16px var(--step-font-sans);
  --step-text-overline-size: 12px;
  --step-text-overline-line: 16px;
  --step-text-overline-tracking: 0.06em;

  /* Spacing (4px grid) — proposed */
  --step-space-0: 0px;
  --step-space-1: 4px;
  --step-space-2: 8px;
  --step-space-3: 12px;
  --step-space-4: 16px;
  --step-space-5: 20px;
  --step-space-6: 24px;
  --step-space-8: 32px;
  --step-space-10: 40px;
  --step-space-12: 48px;
  --step-space-16: 64px;
  --step-space-20: 80px;
  --step-space-24: 96px;
  --step-space-32: 128px;

  /* Radius — proposed */
  --step-radius-none: 0px;
  --step-radius-xs: 4px;
  --step-radius-sm: 6px;
  --step-radius-md: 8px;
  --step-radius-lg: 12px;
  --step-radius-xl: 16px;
  --step-radius-2xl: 24px;
  --step-radius-3xl: 28px;
  --step-radius-full: 9999px;

  /* Elevation — proposed */
  --step-shadow-xs: 0px 1px 2px 0px rgb(20 20 40 / 0.06);
  --step-shadow-sm: 0px 1px 3px 0px rgb(20 20 40 / 0.08), 0px 1px 2px -1px rgb(20 20 40 / 0.06);
  --step-shadow-md: 0px 4px 8px -2px rgb(20 20 40 / 0.1), 0px 2px 4px -2px rgb(20 20 40 / 0.06);
  --step-shadow-lg: 0px 12px 24px -4px rgb(20 20 40 / 0.12), 0px 4px 8px -4px rgb(20 20 40 / 0.06);
  --step-shadow-xl: 0px 24px 48px -12px rgb(20 20 40 / 0.2);
  --step-shadow-card: 0px 2px 40px 0px rgb(20 20 40 / 0.12);
  --step-focus-ring: 0 0 0 3px color-mix(in srgb, var(--step-color-focus) 45%, transparent);

  /* Motion — proposed */
  --step-duration-instant: 0ms;
  --step-duration-fast: 120ms;
  --step-duration-base: 200ms;
  --step-duration-slow: 320ms;
  --step-duration-slower: 480ms;
  --step-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --step-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --step-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --step-ease-linear: cubic-bezier(0, 0, 1, 1);

  /* Z-index — proposed */
  --step-z-base: 0;
  --step-z-raised: 10;
  --step-z-dropdown: 1000;
  --step-z-sticky: 1100;
  --step-z-overlay: 1300;
  --step-z-modal: 1400;
  --step-z-toast: 1500;
  --step-z-tooltip: 1600;

  /* Logo rules — PDF p.8-20 */
  --step-logo-x-ratio: 0.228; /* X = bar width = 22.8% of logo width */
  --step-logo-clearspace: 2; /* × X */
  --step-logo-edge-distance: 3; /* × X */
  --step-logo-min-width: 100px;
  --step-logo-rec-width: 165px;
  --step-logo-aspect: 0.8212;
  --step-logo-framed-aspect: 0.7656;
  --step-logo-shadow-blur: 25px;
  --step-logo-shadow-strong: drop-shadow(0 0 var(--step-logo-shadow-blur) rgb(0 0 0 / 1));
  --step-logo-shadow-soft: drop-shadow(0 0 var(--step-logo-shadow-blur) rgb(0 0 0 / 0.5));

  /* Semantic colours — light (default) */
  color-scheme: light;
  --step-color-bg: #FFFFFF;
  --step-color-bg-subtle: #F5F5F7;
  --step-color-surface: #FFFFFF;
  --step-color-surface-raised: #FFFFFF;
  --step-color-surface-sunken: #EDEDF0;
  --step-color-border: #E2E2E7;
  --step-color-border-strong: #CDCDD4;
  --step-color-text: #1D1D1F;
  --step-color-text-muted: #63636D;
  --step-color-text-subtle: #86868B;
  --step-color-text-inverse: #FFFFFF;
  --step-color-primary: #0024C1;
  --step-color-primary-hover: #00199A;
  --step-color-primary-active: #01176C;
  --step-color-primary-subtle: #F1F5FE;
  --step-color-primary-muted: #DFEAFE;
  --step-color-primary-text: #0024C1;
  --step-color-primary-border: #BFD5FF;
  --step-color-on-primary: #FFFFFF;
  --step-color-focus: #2C65F5;
  --step-color-success: #00752E;
  --step-color-success-subtle: #EAFAF0;
  --step-color-success-text: #005E17;
  --step-color-warning: #FFB600;
  --step-color-warning-subtle: #FDF4E6;
  --step-color-warning-text: #733100;
  --step-color-danger: #B70037;
  --step-color-danger-subtle: #FEF2F3;
  --step-color-danger-text: #9B0023;
  --step-color-info: #005CB6;
  --step-color-info-subtle: #EDF6FF;
  --step-color-info-text: #00449D;
  --step-color-on-success: #FFFFFF;
  --step-color-on-warning: #141414;
  --step-color-on-danger: #FFFFFF;
  --step-color-on-info: #FFFFFF;
  --step-color-overlay: rgb(20 20 20 / 0.56);

  /* Course theme — defaults to brand */
  --step-course-primary: var(--step-brand-blue);
  --step-course-secondary: var(--step-brand-blue);
  --step-course-on-primary: #FFFFFF;
  --step-course-on-band: #FFFFFF;
  --step-course-on-secondary: #FFFFFF;
  --step-course-ink: #0024C1;
}

/* Dark theme: follows the OS unless data-theme="light" is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --step-color-bg: #000000;
    --step-color-bg-subtle: #111217;
    --step-color-surface: #17181C;
    --step-color-surface-raised: #1D1D1F;
    --step-color-surface-sunken: #0A0A0B;
    --step-color-border: #2C2C31;
    --step-color-border-strong: #48484F;
    --step-color-text: #F5F5F7;
    --step-color-text-muted: #A1A1A8;
    --step-color-text-subtle: #86868B;
    --step-color-text-inverse: #1D1D1F;
    --step-color-primary: #0F43DC;
    --step-color-primary-hover: #2C65F5;
    --step-color-primary-active: #5E8FFE;
    --step-color-primary-subtle: #1A243F;
    --step-color-primary-muted: #1D2E59;
    --step-color-primary-text: #94B7FF;
    --step-color-primary-border: #334876;
    --step-color-on-primary: #FFFFFF;
    --step-color-focus: #5E8FFE;
    --step-color-success: #00CC7E;
    --step-color-success-subtle: #14312A;
    --step-color-success-text: #ACE4C1;
    --step-color-warning: #FFB600;
    --step-color-warning-subtle: #372E18;
    --step-color-warning-text: #EED09F;
    --step-color-danger: #F23064;
    --step-color-danger-subtle: #361B26;
    --step-color-danger-text: #FEC2C8;
    --step-color-info: #06A0FF;
    --step-color-info-subtle: #152B3C;
    --step-color-info-text: #7BBEF9;
    --step-color-on-success: #141414;
    --step-color-on-warning: #141414;
    --step-color-on-danger: #141414;
    --step-color-on-info: #141414;
    --step-color-overlay: rgb(0 0 0 / 0.64);
    --step-course-ink: #94B7FF;
    --step-shadow-xs: 0px 1px 2px 0px rgb(0 0 0 / 0.06);
    --step-shadow-sm: 0px 1px 3px 0px rgb(0 0 0 / 0.08), 0px 1px 2px -1px rgb(0 0 0 / 0.06);
    --step-shadow-md: 0px 4px 8px -2px rgb(0 0 0 / 0.1), 0px 2px 4px -2px rgb(0 0 0 / 0.06);
    --step-shadow-lg: 0px 12px 24px -4px rgb(0 0 0 / 0.12), 0px 4px 8px -4px rgb(0 0 0 / 0.06);
    --step-shadow-xl: 0px 24px 48px -12px rgb(0 0 0 / 0.2);
    --step-shadow-card: 0px 2px 40px 0px rgb(0 0 0 / 0.12);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --step-color-bg: #000000;
  --step-color-bg-subtle: #111217;
  --step-color-surface: #17181C;
  --step-color-surface-raised: #1D1D1F;
  --step-color-surface-sunken: #0A0A0B;
  --step-color-border: #2C2C31;
  --step-color-border-strong: #48484F;
  --step-color-text: #F5F5F7;
  --step-color-text-muted: #A1A1A8;
  --step-color-text-subtle: #86868B;
  --step-color-text-inverse: #1D1D1F;
  --step-color-primary: #0F43DC;
  --step-color-primary-hover: #2C65F5;
  --step-color-primary-active: #5E8FFE;
  --step-color-primary-subtle: #1A243F;
  --step-color-primary-muted: #1D2E59;
  --step-color-primary-text: #94B7FF;
  --step-color-primary-border: #334876;
  --step-color-on-primary: #FFFFFF;
  --step-color-focus: #5E8FFE;
  --step-color-success: #00CC7E;
  --step-color-success-subtle: #14312A;
  --step-color-success-text: #ACE4C1;
  --step-color-warning: #FFB600;
  --step-color-warning-subtle: #372E18;
  --step-color-warning-text: #EED09F;
  --step-color-danger: #F23064;
  --step-color-danger-subtle: #361B26;
  --step-color-danger-text: #FEC2C8;
  --step-color-info: #06A0FF;
  --step-color-info-subtle: #152B3C;
  --step-color-info-text: #7BBEF9;
  --step-color-on-success: #141414;
  --step-color-on-warning: #141414;
  --step-color-on-danger: #141414;
  --step-color-on-info: #141414;
  --step-color-overlay: rgb(0 0 0 / 0.64);
  --step-course-ink: #94B7FF;
  --step-shadow-xs: 0px 1px 2px 0px rgb(0 0 0 / 0.06);
  --step-shadow-sm: 0px 1px 3px 0px rgb(0 0 0 / 0.08), 0px 1px 2px -1px rgb(0 0 0 / 0.06);
  --step-shadow-md: 0px 4px 8px -2px rgb(0 0 0 / 0.1), 0px 2px 4px -2px rgb(0 0 0 / 0.06);
  --step-shadow-lg: 0px 12px 24px -4px rgb(0 0 0 / 0.12), 0px 4px 8px -4px rgb(0 0 0 / 0.06);
  --step-shadow-xl: 0px 24px 48px -12px rgb(0 0 0 / 0.2);
  --step-shadow-card: 0px 2px 40px 0px rgb(0 0 0 / 0.12);
}

/* Section themes — force a theme on any block (website pattern: black / white sections) */
.step-theme-dark {
  color-scheme: dark;
  --step-color-bg: #000000;
  --step-color-bg-subtle: #111217;
  --step-color-surface: #17181C;
  --step-color-surface-raised: #1D1D1F;
  --step-color-surface-sunken: #0A0A0B;
  --step-color-border: #2C2C31;
  --step-color-border-strong: #48484F;
  --step-color-text: #F5F5F7;
  --step-color-text-muted: #A1A1A8;
  --step-color-text-subtle: #86868B;
  --step-color-text-inverse: #1D1D1F;
  --step-color-primary: #0F43DC;
  --step-color-primary-hover: #2C65F5;
  --step-color-primary-active: #5E8FFE;
  --step-color-primary-subtle: #1A243F;
  --step-color-primary-muted: #1D2E59;
  --step-color-primary-text: #94B7FF;
  --step-color-primary-border: #334876;
  --step-color-on-primary: #FFFFFF;
  --step-color-focus: #5E8FFE;
  --step-color-success: #00CC7E;
  --step-color-success-subtle: #14312A;
  --step-color-success-text: #ACE4C1;
  --step-color-warning: #FFB600;
  --step-color-warning-subtle: #372E18;
  --step-color-warning-text: #EED09F;
  --step-color-danger: #F23064;
  --step-color-danger-subtle: #361B26;
  --step-color-danger-text: #FEC2C8;
  --step-color-info: #06A0FF;
  --step-color-info-subtle: #152B3C;
  --step-color-info-text: #7BBEF9;
  --step-color-on-success: #141414;
  --step-color-on-warning: #141414;
  --step-color-on-danger: #141414;
  --step-color-on-info: #141414;
  --step-color-overlay: rgb(0 0 0 / 0.64);
  --step-course-ink: #94B7FF;
  --step-shadow-xs: 0px 1px 2px 0px rgb(0 0 0 / 0.06);
  --step-shadow-sm: 0px 1px 3px 0px rgb(0 0 0 / 0.08), 0px 1px 2px -1px rgb(0 0 0 / 0.06);
  --step-shadow-md: 0px 4px 8px -2px rgb(0 0 0 / 0.1), 0px 2px 4px -2px rgb(0 0 0 / 0.06);
  --step-shadow-lg: 0px 12px 24px -4px rgb(0 0 0 / 0.12), 0px 4px 8px -4px rgb(0 0 0 / 0.06);
  --step-shadow-xl: 0px 24px 48px -12px rgb(0 0 0 / 0.2);
  --step-shadow-card: 0px 2px 40px 0px rgb(0 0 0 / 0.12);
  background-color: var(--step-color-bg);
  color: var(--step-color-text);
}
.step-theme-light {
  color-scheme: light;
  --step-color-bg: #FFFFFF;
  --step-color-bg-subtle: #F5F5F7;
  --step-color-surface: #FFFFFF;
  --step-color-surface-raised: #FFFFFF;
  --step-color-surface-sunken: #EDEDF0;
  --step-color-border: #E2E2E7;
  --step-color-border-strong: #CDCDD4;
  --step-color-text: #1D1D1F;
  --step-color-text-muted: #63636D;
  --step-color-text-subtle: #86868B;
  --step-color-text-inverse: #FFFFFF;
  --step-color-primary: #0024C1;
  --step-color-primary-hover: #00199A;
  --step-color-primary-active: #01176C;
  --step-color-primary-subtle: #F1F5FE;
  --step-color-primary-muted: #DFEAFE;
  --step-color-primary-text: #0024C1;
  --step-color-primary-border: #BFD5FF;
  --step-color-on-primary: #FFFFFF;
  --step-color-focus: #2C65F5;
  --step-color-success: #00752E;
  --step-color-success-subtle: #EAFAF0;
  --step-color-success-text: #005E17;
  --step-color-warning: #FFB600;
  --step-color-warning-subtle: #FDF4E6;
  --step-color-warning-text: #733100;
  --step-color-danger: #B70037;
  --step-color-danger-subtle: #FEF2F3;
  --step-color-danger-text: #9B0023;
  --step-color-info: #005CB6;
  --step-color-info-subtle: #EDF6FF;
  --step-color-info-text: #00449D;
  --step-color-on-success: #FFFFFF;
  --step-color-on-warning: #141414;
  --step-color-on-danger: #FFFFFF;
  --step-color-on-info: #FFFFFF;
  --step-color-overlay: rgb(20 20 20 / 0.56);
  --step-course-ink: #0024C1;
  --step-shadow-xs: 0px 1px 2px 0px rgb(20 20 40 / 0.06);
  --step-shadow-sm: 0px 1px 3px 0px rgb(20 20 40 / 0.08), 0px 1px 2px -1px rgb(20 20 40 / 0.06);
  --step-shadow-md: 0px 4px 8px -2px rgb(20 20 40 / 0.1), 0px 2px 4px -2px rgb(20 20 40 / 0.06);
  --step-shadow-lg: 0px 12px 24px -4px rgb(20 20 40 / 0.12), 0px 4px 8px -4px rgb(20 20 40 / 0.06);
  --step-shadow-xl: 0px 24px 48px -12px rgb(20 20 40 / 0.2);
  --step-shadow-card: 0px 2px 40px 0px rgb(20 20 40 / 0.12);
  background-color: var(--step-color-bg);
  color: var(--step-color-text);
}

/* Course themes — set data-course on any element (PDF p.21-28) */
[data-course] {
  --step-course-tint: color-mix(in srgb, var(--step-course-secondary) 12%, var(--step-color-surface));
  --step-course-primary-tint: color-mix(in srgb, var(--step-course-primary) 10%, var(--step-color-surface));
  --step-course-border: color-mix(in srgb, var(--step-course-secondary) 55%, var(--step-color-surface));
}
[data-course="graphic-design"] {
  --step-course-primary: var(--step-accent-cobalt);
  --step-course-secondary: var(--step-accent-orange);
  --step-course-on-primary: #FFFFFF;  /* UI text, ≥ 4.5:1 */
  --step-course-on-band: #FFFFFF;  /* print bands — as in the PDF mockups */
  --step-course-on-secondary: #141414;
  --step-course-ink: #0042E8;
}
[data-course="design-school"] {
  --step-course-primary: var(--step-accent-orange);
  --step-course-secondary: var(--step-accent-amber);
  --step-course-on-primary: #141414;  /* UI text, ≥ 4.5:1 */
  --step-course-on-band: #FFFFFF;  /* print bands — as in the PDF mockups */
  --step-course-on-secondary: #141414;
  --step-course-ink: #C93200;
}
[data-course="ui-ux"] {
  --step-course-primary: var(--step-accent-violet);
  --step-course-secondary: var(--step-accent-violet);
  --step-course-on-primary: #FFFFFF;  /* UI text, ≥ 4.5:1 */
  --step-course-on-band: #FFFFFF;  /* print bands — as in the PDF mockups */
  --step-course-on-secondary: #FFFFFF;
  --step-course-ink: #5700FF;
}
[data-course="interior-design"] {
  --step-course-primary: var(--step-accent-green);
  --step-course-secondary: var(--step-accent-green);
  --step-course-on-primary: #141414;  /* UI text, ≥ 4.5:1 */
  --step-course-on-band: #FFFFFF;  /* print bands — as in the PDF mockups */
  --step-course-on-secondary: #141414;
  --step-course-ink: #008037;
}
[data-course="programming"] {
  --step-course-primary: var(--step-accent-purple);
  --step-course-secondary: var(--step-accent-teal);
  --step-course-on-primary: #FFFFFF;  /* UI text, ≥ 4.5:1 */
  --step-course-on-band: #FFFFFF;  /* print bands — as in the PDF mockups */
  --step-course-on-secondary: #141414;
  --step-course-ink: #7C00FF;
}
[data-course="programming-school"] {
  --step-course-primary: var(--step-accent-purple);
  --step-course-secondary: var(--step-accent-yellow);
  --step-course-on-primary: #FFFFFF;  /* UI text, ≥ 4.5:1 */
  --step-course-on-band: #FFFFFF;  /* print bands — as in the PDF mockups */
  --step-course-on-secondary: #141414;
  --step-course-ink: #7C00FF;
}
[data-course="front-end"] {
  --step-course-primary: var(--step-accent-purple);
  --step-course-secondary: var(--step-accent-pink);
  --step-course-on-primary: #FFFFFF;  /* UI text, ≥ 4.5:1 */
  --step-course-on-band: #FFFFFF;  /* print bands — as in the PDF mockups */
  --step-course-on-secondary: #141414;
  --step-course-ink: #7C00FF;
}
[data-course="python"] {
  --step-course-primary: var(--step-accent-sky);
  --step-course-secondary: var(--step-accent-yellow);
  --step-course-on-primary: #141414;  /* UI text, ≥ 4.5:1 */
  --step-course-on-band: #FFFFFF;  /* print bands — as in the PDF mockups */
  --step-course-on-secondary: #141414;
  --step-course-ink: #006DC8;
}
[data-course="networks"] {
  --step-course-primary: var(--step-accent-navy);
  --step-course-secondary: var(--step-accent-rose);
  --step-course-on-primary: #FFFFFF;  /* UI text, ≥ 4.5:1 */
  --step-course-on-band: #FFFFFF;  /* print bands — as in the PDF mockups */
  --step-course-on-secondary: #141414;
  --step-course-ink: #00258C;
}
[data-course="it-support"] {
  --step-course-primary: var(--step-accent-navy);
  --step-course-secondary: var(--step-accent-cyan);
  --step-course-on-primary: #FFFFFF;  /* UI text, ≥ 4.5:1 */
  --step-course-on-band: #FFFFFF;  /* print bands — as in the PDF mockups */
  --step-course-on-secondary: #141414;
  --step-course-ink: #00258C;
}
[data-course="junior"] {
  --step-course-primary: var(--step-accent-sun);
  --step-course-secondary: var(--step-accent-sun);
  --step-course-on-primary: #141414;  /* UI text, ≥ 4.5:1 */
  --step-course-on-band: #212121;  /* print bands — as in the PDF mockups */
  --step-course-on-secondary: #141414;
  --step-course-ink: #8F6D00;
}
[data-course="martech"] {
  --step-course-primary: var(--step-accent-violet);
  --step-course-secondary: var(--step-accent-coral);
  --step-course-on-primary: #FFFFFF;  /* UI text, ≥ 4.5:1 */
  --step-course-on-band: #FFFFFF;  /* print bands — as in the PDF mockups */
  --step-course-on-secondary: #141414;
  --step-course-ink: #5700FF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-course="graphic-design"] { --step-course-ink: #4B84FF; }
  :root:not([data-theme="light"]) [data-course="design-school"] { --step-course-ink: #FF6700; }
  :root:not([data-theme="light"]) [data-course="ui-ux"] { --step-course-ink: #7B77FE; }
  :root:not([data-theme="light"]) [data-course="interior-design"] { --step-course-ink: #00CC7E; }
  :root:not([data-theme="light"]) [data-course="programming"] { --step-course-ink: #966DFE; }
  :root:not([data-theme="light"]) [data-course="programming-school"] { --step-course-ink: #966DFE; }
  :root:not([data-theme="light"]) [data-course="front-end"] { --step-course-ink: #966DFE; }
  :root:not([data-theme="light"]) [data-course="python"] { --step-course-ink: #06A0FF; }
  :root:not([data-theme="light"]) [data-course="networks"] { --step-course-ink: #4D80ED; }
  :root:not([data-theme="light"]) [data-course="it-support"] { --step-course-ink: #4D80ED; }
  :root:not([data-theme="light"]) [data-course="junior"] { --step-course-ink: #FFDC10; }
  :root:not([data-theme="light"]) [data-course="martech"] { --step-course-ink: #7B77FE; }
}
:root[data-theme="dark"] [data-course="graphic-design"] { --step-course-ink: #4B84FF; }
:root[data-theme="dark"] [data-course="design-school"] { --step-course-ink: #FF6700; }
:root[data-theme="dark"] [data-course="ui-ux"] { --step-course-ink: #7B77FE; }
:root[data-theme="dark"] [data-course="interior-design"] { --step-course-ink: #00CC7E; }
:root[data-theme="dark"] [data-course="programming"] { --step-course-ink: #966DFE; }
:root[data-theme="dark"] [data-course="programming-school"] { --step-course-ink: #966DFE; }
:root[data-theme="dark"] [data-course="front-end"] { --step-course-ink: #966DFE; }
:root[data-theme="dark"] [data-course="python"] { --step-course-ink: #06A0FF; }
:root[data-theme="dark"] [data-course="networks"] { --step-course-ink: #4D80ED; }
:root[data-theme="dark"] [data-course="it-support"] { --step-course-ink: #4D80ED; }
:root[data-theme="dark"] [data-course="junior"] { --step-course-ink: #FFDC10; }
:root[data-theme="dark"] [data-course="martech"] { --step-course-ink: #7B77FE; }
:root .step-theme-dark [data-course="graphic-design"] { --step-course-ink: #4B84FF; }
:root .step-theme-dark [data-course="design-school"] { --step-course-ink: #FF6700; }
:root .step-theme-dark [data-course="ui-ux"] { --step-course-ink: #7B77FE; }
:root .step-theme-dark [data-course="interior-design"] { --step-course-ink: #00CC7E; }
:root .step-theme-dark [data-course="programming"] { --step-course-ink: #966DFE; }
:root .step-theme-dark [data-course="programming-school"] { --step-course-ink: #966DFE; }
:root .step-theme-dark [data-course="front-end"] { --step-course-ink: #966DFE; }
:root .step-theme-dark [data-course="python"] { --step-course-ink: #06A0FF; }
:root .step-theme-dark [data-course="networks"] { --step-course-ink: #4D80ED; }
:root .step-theme-dark [data-course="it-support"] { --step-course-ink: #4D80ED; }
:root .step-theme-dark [data-course="junior"] { --step-course-ink: #FFDC10; }
:root .step-theme-dark [data-course="martech"] { --step-course-ink: #7B77FE; }
:root .step-theme-light [data-course="graphic-design"] { --step-course-ink: #0042E8; }
:root .step-theme-light [data-course="design-school"] { --step-course-ink: #C93200; }
:root .step-theme-light [data-course="ui-ux"] { --step-course-ink: #5700FF; }
:root .step-theme-light [data-course="interior-design"] { --step-course-ink: #008037; }
:root .step-theme-light [data-course="programming"] { --step-course-ink: #7C00FF; }
:root .step-theme-light [data-course="programming-school"] { --step-course-ink: #7C00FF; }
:root .step-theme-light [data-course="front-end"] { --step-course-ink: #7C00FF; }
:root .step-theme-light [data-course="python"] { --step-course-ink: #006DC8; }
:root .step-theme-light [data-course="networks"] { --step-course-ink: #00258C; }
:root .step-theme-light [data-course="it-support"] { --step-course-ink: #00258C; }
:root .step-theme-light [data-course="junior"] { --step-course-ink: #8F6D00; }
:root .step-theme-light [data-course="martech"] { --step-course-ink: #5700FF; }