/* training-app-styles 0.6.0 · generated from data/tokens.json · do not edit or reformat · sha256:4dbb4ab8e9952594f4ef67f706837ad471515e76ce8de96759ae3c0b8ec975eb */
/* Dark is the default: on :root, and on any element marked data-theme="dark". */
:root,
[data-theme='dark'] {
  color-scheme: dark;
  --ubf-bg-app: #020617;
  --ubf-bg-scene: #020617;
  --ubf-bg-panel: #0f172a;
  --ubf-bg-surface: #1e293b;
  --ubf-bg-elevated: #334155;
  --ubf-field-bg: #0f172a;
  --ubf-list-bg: #0f172a;
  --ubf-control-bg: #1e293b;
  --ubf-control-fg: #e2e8f0;
  --ubf-control-hover-bg: #334155;
  --ubf-control-active-bg: #475569;
  --ubf-overlay-bg: rgba(2, 6, 23, 0.82);
  --ubf-tutorial-dim: rgba(2, 6, 23, 0.6);
  --ubf-backdrop: rgba(2, 6, 23, 0.7);
  --ubf-fg-title: #e2e8f0;
  --ubf-fg-primary: #e2e8f0;
  --ubf-fg-secondary: #cbd5e1;
  --ubf-fg-muted: #94a3b8;
  --ubf-fg-hint: #94a3b8;
  --ubf-fg-placeholder: #94a3b8;
  --ubf-fg-positive: #22c55e;
  --ubf-toast-fg: #ffffff;
  --ubf-border-subtle: #1e293b;
  --ubf-border-default: #334155;
  --ubf-menu-border: #475569;
  --ubf-control-border: #64748b;
  --ubf-control-hover-border: #94a3b8;
  --ubf-danger-border: #dc2626;
  --ubf-selected-edge: #7dd3fc;
  --ubf-focus-ring: #7dd3fc;
  --ubf-primary-bg: #0369a1;
  --ubf-primary-border: #0c4a6e;
  --ubf-primary-fg: #e0f2fe;
  --ubf-primary-hover-bg: #0376b4;
  --ubf-primary-hover-fg: #ffffff;
  --ubf-primary-active-bg: #075985;
  --ubf-primary-icon: #0ea5e9;
  --ubf-link: #7dd3fc;
  --ubf-link-hover: #bae6fd;
  --ubf-accent: #22d3ee;
  --ubf-accent-fg: #22d3ee;
  --ubf-selected-bg: #1b425e;
  --ubf-selected-control-bg: #1b425e;
  --ubf-selected-fg: #7dd3fc;
  --ubf-selected-mark: #7dd3fc;
  --ubf-selected-bar: #22d3ee;
  --ubf-stroke-default: #475569;
  --ubf-stroke-emphasis: #22d3ee;
  --ubf-scene-guide: #fbbf24;
  --ubf-glow-element: #67e8f9;
  --ubf-overlay-border: #334155;
  --ubf-action-fg: #22d3ee;
  --ubf-glow-action: #22d3ee;
  --ubf-glow-action-halo: rgba(34, 211, 238, 0.4);
  --ubf-danger-fg: #fca5a5;
  --ubf-warning-fg: #fb923c;
  --ubf-active-fg: #fbbf24;
  --ubf-status-active: #86efac;
  --ubf-validation-ok-bg: #1e293b;
  --ubf-validation-ok-fg: #86efac;
  --ubf-validation-warning-bg: #78350f;
  --ubf-validation-warning-fg: #fcd34d;
  --ubf-validation-error-bg: #7f1d1d;
  --ubf-validation-error-fg: #fca5a5;
  --ubf-toast-positive-bg: #15803d;
  --ubf-toast-negative-bg: #dc2626;
  --ubf-toast-neutral-bg: #475569;
  --ubf-content-drills: #22d3ee;
  --ubf-content-videos: #e879f9;
  --ubf-content-blog: #86efac;
  --ubf-content-documents: #cbd5e1;
  --ubf-content-fg: #020617;
  --ubf-severity-red: #dc2626;
  --ubf-severity-amber: #fb923c;
  --ubf-severity-green: #00ff00;
  --ubf-star-on: #ffffff;
  --ubf-star-off: #cbd5e1;
  --ubf-tile-symbol: #e2e8f0;
  --ubf-band-blue: #7dd3fc;
  --ubf-band-purple: #d8b4fe;
  --ubf-band-grey: #94a3b8;
  --ubf-band-green: #86efac;
  --ubf-band-red: #fca5a5;
  --ubf-band-amber: #fcd34d;
  --ubf-band-fg: #0b1220;
  --ubf-scrollbar-thumb: #94a3b8;
  --ubf-shadow-card: none;
  --ubf-shadow-raised: 0 2px 6px rgba(0, 0, 0, 0.25);
  --ubf-shadow-toast: 0 2px 6px rgba(0, 0, 0, 0.4);
  --ubf-shadow-glow-element: 0 0 8px var(--ubf-glow-element);
  --ubf-shadow-glow-action: 0 0 0 var(--ubf-line-width-strong) var(--ubf-glow-action), 0 0 8px 2px var(--ubf-glow-action-halo);
  --ubf-shadow-glow-row: inset 0 0 0 var(--ubf-line-width) var(--ubf-glow-action), 0 0 4px var(--ubf-glow-action);
  --ubf-shadow-bar-selected: inset var(--ubf-bar-width-sm) 0 0 var(--ubf-selected-bar);
  --ubf-shadow-bar-accent: inset var(--ubf-bar-width) 0 0 var(--ubf-accent);
  --ubf-shadow-cursor: inset 0 0 0 var(--ubf-line-width-strong) var(--ubf-selected-edge);
}

[data-theme='light'] {
  color-scheme: light;
  --ubf-bg-app: #e9eef5;
  --ubf-bg-scene: #e9eef5;
  --ubf-bg-panel: #ffffff;
  --ubf-bg-surface: #f1f5f9;
  --ubf-bg-elevated: #ffffff;
  --ubf-field-bg: #ffffff;
  --ubf-list-bg: #ffffff;
  --ubf-control-bg: #ffffff;
  --ubf-control-fg: #0f172a;
  --ubf-control-hover-bg: #f1f5f9;
  --ubf-control-active-bg: #e2e8f0;
  --ubf-overlay-bg: rgba(255, 255, 255, 0.94);
  --ubf-tutorial-dim: rgba(2, 6, 23, 0.6);
  --ubf-backdrop: rgba(15, 23, 42, 0.4);
  --ubf-fg-title: #0f172a;
  --ubf-fg-primary: #0f172a;
  --ubf-fg-secondary: #334155;
  --ubf-fg-muted: #475569;
  --ubf-fg-hint: #475569;
  --ubf-fg-placeholder: #64748b;
  --ubf-fg-positive: #166534;
  --ubf-toast-fg: #ffffff;
  --ubf-border-subtle: #e2e8f0;
  --ubf-border-default: #dbe3ec;
  --ubf-menu-border: #dbe3ec;
  --ubf-control-border: #6f84a0;
  --ubf-control-hover-border: #475569;
  --ubf-danger-border: #dc2626;
  --ubf-selected-edge: #0284c7;
  --ubf-focus-ring: #0369a1;
  --ubf-primary-bg: #0369a1;
  --ubf-primary-border: #075985;
  --ubf-primary-fg: #ffffff;
  --ubf-primary-hover-bg: #0376b4;
  --ubf-primary-hover-fg: #ffffff;
  --ubf-primary-active-bg: #075985;
  --ubf-primary-icon: #0369a1;
  --ubf-link: #0369a1;
  --ubf-link-hover: #075985;
  --ubf-accent: #0284c7;
  --ubf-accent-fg: #0369a1;
  --ubf-selected-bg: #e0f2fe;
  --ubf-selected-control-bg: #e0f2fe;
  --ubf-selected-fg: #0c4a6e;
  --ubf-selected-mark: #0369a1;
  --ubf-selected-bar: #0284c7;
  --ubf-stroke-default: #475569;
  --ubf-stroke-emphasis: #0369a1;
  --ubf-scene-guide: #fbbf24;
  --ubf-glow-element: #67e8f9;
  --ubf-overlay-border: #dbe3ec;
  --ubf-action-fg: #0e7490;
  --ubf-glow-action: #0891b2;
  --ubf-glow-action-halo: rgba(8, 145, 178, 0.35);
  --ubf-danger-fg: #b91c1c;
  --ubf-warning-fg: #b45309;
  --ubf-active-fg: #d97706;
  --ubf-status-active: #15803d;
  --ubf-validation-ok-bg: #f0fdf4;
  --ubf-validation-ok-fg: #166534;
  --ubf-validation-warning-bg: #fffbeb;
  --ubf-validation-warning-fg: #92400e;
  --ubf-validation-error-bg: #fef2f2;
  --ubf-validation-error-fg: #991b1b;
  --ubf-toast-positive-bg: #15803d;
  --ubf-toast-negative-bg: #dc2626;
  --ubf-toast-neutral-bg: #475569;
  --ubf-content-drills: #0891b2;
  --ubf-content-videos: #c026d3;
  --ubf-content-blog: #15803d;
  --ubf-content-documents: #64748b;
  --ubf-content-fg: #020617;
  --ubf-severity-red: #dc2626;
  --ubf-severity-amber: #ea580c;
  --ubf-severity-green: #15803d;
  --ubf-star-on: #0f172a;
  --ubf-star-off: #334155;
  --ubf-tile-symbol: #0f172a;
  --ubf-band-blue: #7dd3fc;
  --ubf-band-purple: #d8b4fe;
  --ubf-band-grey: #94a3b8;
  --ubf-band-green: #86efac;
  --ubf-band-red: #fca5a5;
  --ubf-band-amber: #fcd34d;
  --ubf-band-fg: #0b1220;
  --ubf-scrollbar-thumb: #475569;
  --ubf-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.05);
  --ubf-shadow-raised: 0 8px 24px rgba(15, 23, 42, 0.16);
  --ubf-shadow-toast: 0 4px 12px rgba(15, 23, 42, 0.18);
  --ubf-shadow-glow-element: 0 0 8px var(--ubf-glow-element);
  --ubf-shadow-glow-action: 0 0 0 var(--ubf-line-width-strong) var(--ubf-glow-action), 0 0 8px 2px var(--ubf-glow-action-halo);
  --ubf-shadow-glow-row: inset 0 0 0 var(--ubf-line-width) var(--ubf-glow-action), 0 0 4px var(--ubf-glow-action);
  --ubf-shadow-bar-selected: inset var(--ubf-bar-width-sm) 0 0 var(--ubf-selected-bar);
  --ubf-shadow-bar-accent: inset var(--ubf-bar-width) 0 0 var(--ubf-accent);
  --ubf-shadow-cursor: inset 0 0 0 var(--ubf-line-width-strong) var(--ubf-selected-edge);
}

/* The same in every theme. A type style is a font shorthand: font: var(--ubf-text-body). */
:root {
  --ubf-font-sans: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ubf-text-wordmark-lg: 900 40px/1 var(--ubf-font-sans);
  --ubf-text-wordmark-lg-tracking: 0.049em;
  --ubf-text-wordmark-md: 900 36px/1 var(--ubf-font-sans);
  --ubf-text-wordmark-md-tracking: 0.049em;
  --ubf-text-wordmark-sm: 900 30px/1 var(--ubf-font-sans);
  --ubf-text-wordmark-sm-tracking: 0.049em;
  --ubf-text-product-name-lg: 400 28px/1.2 var(--ubf-font-sans);
  --ubf-text-product-name: 400 22px/1.3 var(--ubf-font-sans);
  --ubf-text-product-name-sm: 400 15px/1.3 var(--ubf-font-sans);
  --ubf-text-page-title-lg: 700 32px/1.2 var(--ubf-font-sans);
  --ubf-text-page-title: 700 28px/1.2 var(--ubf-font-sans);
  --ubf-text-detail-title: 700 26px/1.25 var(--ubf-font-sans);
  --ubf-text-card-title: 700 22px/1.3 var(--ubf-font-sans);
  --ubf-text-section-title: 700 20px/1.3 var(--ubf-font-sans);
  --ubf-text-group-title: 700 18px/1.35 var(--ubf-font-sans);
  --ubf-text-subheading: 500 18px/1.35 var(--ubf-font-sans);
  --ubf-text-body: 400 16px/1.5 var(--ubf-font-sans);
  --ubf-text-body-long: 400 16px/1.6 var(--ubf-font-sans);
  --ubf-text-action: 500 16px/1.5 var(--ubf-font-sans);
  --ubf-text-label: 500 14px/1.5 var(--ubf-font-sans);
  --ubf-text-label-caps: 500 14px/1.5 var(--ubf-font-sans);
  --ubf-text-label-caps-tracking: 0.3px;
  --ubf-text-caption: 500 13px/1.45 var(--ubf-font-sans);
  --ubf-text-figure-caption: italic 400 15px/1.45 var(--ubf-font-sans);
  --ubf-text-eyebrow: 500 12px/1.5 var(--ubf-font-sans);
  --ubf-text-eyebrow-tracking: 0.5px;
  --ubf-text-tile-label: 500 12px/1.2 var(--ubf-font-sans);
  --ubf-text-tile-label-tracking: 0.5px;
  --ubf-text-band: 500 11px/1.2 var(--ubf-font-sans);
  --ubf-text-band-tracking: 0.3px;
  --ubf-text-compact-lg: 500 14px/1.45 var(--ubf-font-sans);
  --ubf-text-compact-md: 500 12px/1.45 var(--ubf-font-sans);
  --ubf-text-compact-sm: 500 11px/1.45 var(--ubf-font-sans);
  --ubf-text-compact-sm-tracking: 0.5px;
  --ubf-text-compact-xs: 500 10px/1.4 var(--ubf-font-sans);
  --ubf-space-2: 2px;
  --ubf-space-4: 4px;
  --ubf-space-6: 6px;
  --ubf-space-8: 8px;
  --ubf-space-10: 10px;
  --ubf-space-12: 12px;
  --ubf-space-14: 14px;
  --ubf-space-16: 16px;
  --ubf-space-20: 20px;
  --ubf-space-24: 24px;
  --ubf-space-32: 32px;
  --ubf-space-40: 40px;
  --ubf-space-48: 48px;
  --ubf-radius-xs: 2px;
  --ubf-radius-sm: 3px;
  --ubf-radius-md: 4px;
  --ubf-radius-lg: 6px;
  --ubf-radius-pill: 999px;
  --ubf-size-control: 50px;
  --ubf-size-touch: 44px;
  --ubf-size-compact-sm: 26px;
  --ubf-size-compact-md: 42px;
  --ubf-size-compact-lg: 58px;
  --ubf-size-text-area-min: 60px;
  --ubf-size-sidebar: 180px;
  --ubf-size-row: 56px;
  --ubf-size-row-plain: 58px;
  --ubf-size-row-compact: 28px;
  --ubf-size-option: 36px;
  --ubf-size-filter-header: 46px;
  --ubf-size-filter-option: 38px;
  --ubf-size-mark: 32px;
  --ubf-size-mark-lg: 40px;
  --ubf-size-pill: 32px;
  --ubf-size-band: 32px;
  --ubf-size-tile: 104px;
  --ubf-size-tile-label: 30px;
  --ubf-size-tile-symbol: 62px;
  --ubf-size-tile-band: 40px;
  --ubf-size-symbol: 56px;
  --ubf-size-toggle: 60px;
  --ubf-size-toolbar-min: 80px;
  --ubf-size-help: 22px;
  --ubf-size-action: 200px;
  --ubf-size-card-category: 300px;
  --ubf-size-card-min: 300px;
  --ubf-size-panel-filter: 300px;
  --ubf-size-picker-min: 180px;
  --ubf-size-picker-max: 260px;
  --ubf-size-toast-min: 220px;
  --ubf-size-expiry: 118px;
  --ubf-size-dialog: 560px;
  --ubf-size-form: 480px;
  --ubf-size-column-narrow: 600px;
  --ubf-size-column: 880px;
  --ubf-size-article: 860px;
  --ubf-size-side-panel: 30%;
  --ubf-size-side-panel-min: 300px;
  --ubf-icon-xs: 10px;
  --ubf-icon-sm: 12px;
  --ubf-icon-md: 14px;
  --ubf-icon-lg: 16px;
  --ubf-icon-xl: 18px;
  --ubf-icon-2xl: 20px;
  --ubf-icon-star: 22px;
  --ubf-icon-tile: 28px;
  --ubf-icon-card: 40px;
  --ubf-line-width: 1px;
  --ubf-line-width-strong: 2px;
  --ubf-bar-width-sm: 3px;
  --ubf-bar-width: 4px;
  --ubf-ring-offset: 2px;
  --ubf-ring-offset-inset: -2px;
  --ubf-ring-offset-glow: 4px;
  --ubf-opacity-disabled: 0.4;
  --ubf-opacity-unavailable: 0.5;
  --ubf-opacity-dismiss: 0.85;
  --ubf-opacity-progress: 0.6;
  --ubf-blur-overlay: 8px;
  --ubf-press-shift: 1px;
  --ubf-motion-fast: 80ms;
  --ubf-motion-press: 50ms;
  --ubf-motion-slide: 300ms;
}