/* Single source of design tokens. See DESIGN-SYSTEM.md. */
:root {
  color-scheme: light;
  --background: #fafaf8;
  --surface: #efefed;
  --text: #121316;
  --muted: #737782;
  --subtle: #73787d;
  --line: #d9dcde;
  --accent: #caff18;
  --active: #111416;
  --overlay: #0008;
  --glass: #ffffff80;
  --glass-border: #12131617;
  --glass-inset: #ffffffd9;
  --glass-shadow: 0 2px 8px #12131604;
  --selected-glass: #fff9;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius: 6px;
  --page-gutter: clamp(20px, 2.8vw, 48px);
  --page-max-width: 1720px;
}
:root[data-theme="dark"] { color-scheme: dark; --background: #101212; --surface: #212425; --text: #f5f5f1; --muted: #9da3ae; --subtle: #858e94; --line: #323637; --active: #d0ff18; --overlay: #000b; --glass: #ffffff06; --glass-border: #ffffff24; --glass-inset: #ffffff12; --glass-shadow: 0 2px 8px #00000014; --selected-glass: #ffffff0d; }


:root { --space-8: 64px; --space-9: 80px; --course-sidebar-width: 320px; --course-header-height: 96px; }
:root {
  --card-radius: var(--radius-card);
  --card-title-size: var(--font-lg);
  --card-title-leading: 1.3;
  --card-copy-size: var(--font-sm);
  --card-copy-leading: 1.6;
  --school-logo-size: 32px;
  --school-logo-surface: #fff;
}
:root {
  --space-0: 0;
  --space-half: 2px;
  --space-compact: 6px;
  --font-2xs: 9px;
  --font-xs: 10px;
  --font-caption: 11px;
  --font-sm: 12px;
  --font-label: 13px;
  --font-body: 14px;
  --font-md: 16px;
  --font-lead: 18px;
  --font-lg: 20px;
  --font-xl: 24px;
  --font-2xl: 28px;
  --font-3xl: 32px;
  --font-4xl: 40px;
  --font-5xl: 48px;
  --font-display: 64px;
  --radius-sm: 4px;
  --radius-control: 6px;
  --radius-card: 12px;
  --color-white: #fff;
  --color-ink: #121316;
  --color-paper: #fafaf8;
  --border-width: 1px;
}

@media (max-width: 680px) { :root { --page-gutter: 20px; } }
@media (max-width: 390px) { :root { --page-gutter: 16px; } }
:root { --color-00000008: #00000008; }
:root { --color-101212: #101212; }
:root { --color-151515bf: #151515bf; }

:root { --control-size: 40px; }
:root { --filter-panel-width: 720px; --filter-panel-height: 88dvh; --filter-panel-mobile-height: 100dvh; }
:root { --section-heading-gap: var(--space-5); --section-content-gap: var(--space-7); --copy-paragraph-gap: var(--space-4); }
:root { --subscription-demo-height: 264px; }
:root { --banner-hr: #ff5a1f; --banner-marketing: #0054f7; --banner-automation: #d4fa10; --banner-cybersecurity: #7948ed; --banner-design: #ff8eab; --banner-analytics: #55dac8; --banner-vibecoding: #ffe14b; }
:root { --provider-card-action-width: 220px; }
:root { --mobile-menu-width: 360px; --mobile-menu-motion: 220ms; }
:root { --comparison-column-width: 220px; --comparison-label-width: 160px; --comparison-mobile-label-width: 112px; }