/* Canonical owner: theme/assets/design-system/tokens.css. */
:root {
  --dttt-color-primary: #0876b6;
  --dttt-color-primary-hover: #06669e;
  --dttt-color-primary-soft: #eaf6fb;
  --dttt-color-ink: #14243a;
  --dttt-color-muted: #5e7180;
  --dttt-color-canvas: #f5f8fa;
  --dttt-color-surface: #fff;
  --dttt-color-border: #e2ecf2;
  --dttt-color-border-strong: #d4e5ee;
  --dttt-color-notice: #0876b6;
  --dttt-color-material: #7657c8;
  --dttt-color-assignment: #e58a15;
  --dttt-color-quiz: #d64545;
  --dttt-color-attendance: #168c8c;
  --dttt-color-success: #2f9b68;
  --dttt-color-warning: #b86b00;
  --dttt-color-danger: #c93636;
  --dttt-space-1: 4px;
  --dttt-space-2: 8px;
  --dttt-space-3: 12px;
  --dttt-space-4: 16px;
  --dttt-space-5: 20px;
  --dttt-space-6: 24px;
  --dttt-space-8: 32px;
  --dttt-space-10: 40px;
  --dttt-space-12: 48px;
  --dttt-space-16: 64px;
  --dttt-radius-control: 8px;
  --dttt-radius-button: 10px;
  --dttt-radius-card: 16px;
  --dttt-radius-modal: 20px;
  --dttt-radius-pill: 999px;
  --dttt-shadow-card: 0 6px 20px rgba(18, 52, 74, .08);
  --dttt-shadow-floating: 0 8px 28px rgba(18, 52, 74, .12);
  --dttt-focus-ring: 0 0 0 3px rgba(8, 118, 182, .22);
  --dttt-content-max: 1180px;
  --dttt-shell-max: 1180px;
  --dttt-shell-gutter: clamp(16px, 4vw, 50px);
  --dttt-shell-gap: 24px;
  --dttt-reader-max: 820px;
  --dttt-gutter-mobile: 16px;
  --dttt-gutter-tablet: 24px;
  --dttt-gutter-desktop: clamp(24px, 4vw, 50px);
  --dttt-header-height: 70px;
  --dttt-hero-dashboard-height: 128px;
  --dttt-hero-dashboard-min: 112px;
  --dttt-hero-course-height: 160px;
  --dttt-hero-course-min: 212px;
  --dttt-hero-live-min: 112px;
  --dttt-quick-height: 60px;
  --dttt-dock-height: 56px;
  --dttt-dock-inset: 8px;
  --dttt-card-gap: 16px;
  --dttt-control-sm: 36px;
  --dttt-control-md: 40px;
  --dttt-control-lg: 44px;
  --dttt-motion-instant: 100ms;
  --dttt-motion-fast: 160ms;
  --dttt-motion-standard: 240ms;
  --dttt-motion-emphasis: 420ms;
  --dttt-ease-standard: cubic-bezier(.2, .8, .2, 1);
  --dttt-z-header: 1000;
  --dttt-z-sticky: 1010;
  --dttt-z-dock: 10030;
  --dttt-z-overlay: 10040;
  --dttt-z-modal: 10050;
  color-scheme: light;
}
@media (max-width: 767px) {
:root {
    --dttt-header-height: 58px;
    --dttt-shell-gutter: 16px;
    --dttt-shell-gap: 16px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
:root {
    --dttt-shell-gutter: 24px;
    --dttt-shell-gap: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
:root {
    --dttt-motion-instant: 0ms;
    --dttt-motion-fast: 0ms;
    --dttt-motion-standard: 0ms;
    --dttt-motion-emphasis: 0ms;
  }
}