/* Canonical design tokens. Load before all component and module styles. */
:root {
  /* Canonical visual tokens. Legacy names below are compatibility aliases only. */
  --ds-brand: #5b5ce2;
  --ds-brand-strong: #4748c9;
  --ds-brand-pressed: #3f40b4;
  --ds-brand-soft: #f1f2ff;
  --ds-brand-soft-strong: #e6e8ff;
  --ds-brand-border: #d9dcff;
  --ds-on-brand: #ffffff;

  --ds-bg: #f6f7fb;
  --ds-surface: #ffffff;
  --ds-surface-subtle: #f8f9fc;
  --ds-surface-muted: #f1f3f7;
  --ds-text: #182230;
  --ds-text-secondary: #475467;
  --ds-text-muted: #667085;
  --ds-text-faint: #98a2b3;
  --ds-placeholder: #8d99aa;
  --ds-border: #e3e8f2;
  --ds-border-strong: #cfd7e6;
  --ds-border-hover: #adb8ca;

  --ds-success: #168a5b;
  --ds-success-soft: #ecfdf3;
  --ds-success-border: #a6f4c5;
  --ds-warning: #c55a11;
  --ds-warning-soft: #fff7ed;
  --ds-warning-border: #fed7aa;
  --ds-danger: #c4322b;
  --ds-danger-soft: #fff1f0;
  --ds-danger-border: #f3c7c4;
  --ds-danger-border-strong: #e99c97;
  --ds-info: #276bd6;
  --ds-info-soft: #eff6ff;

  --ds-training: #e87a24;
  --ds-life: #279b68;
  --ds-finance: #7a5af8;

  --ds-font-sans: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --ds-font-size-page-title: clamp(26px, 2vw, 30px);
  --ds-font-size-section-title: clamp(18px, 1.4vw, 20px);
  --ds-font-size-card-title: 16px;
  --ds-font-size-body: 15px;
  --ds-font-size-body-sm: 14px;
  --ds-font-size-meta: 13px;
  --ds-font-size-label: 14px;
  --ds-line-height-body: 1.6;
  --ds-line-height-compact: 1.4;

  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;

  --ds-radius-control: 10px;
  --ds-radius-nested: 12px;
  --ds-radius-surface: 16px;
  --ds-radius-modal: 18px;
  --ds-radius-pill: 999px;
  --ds-shadow-surface: 0 1px 2px rgb(24 34 48 / 4%);
  --ds-shadow-button: 0 4px 12px rgb(91 92 226 / 18%);
  --ds-shadow-float: 0 12px 32px rgb(24 34 48 / 10%);
  --ds-shadow-modal: 0 24px 64px rgb(16 24 40 / 22%);
  --ds-focus-color: rgb(91 92 226 / 28%);
  --ds-focus-color-strong: rgb(91 92 226 / 70%);
  --ds-focus-ring: 0 0 0 3px rgb(91 92 226 / 18%);

  --ds-sidebar-width: 224px;
  --ds-sidebar-collapsed: 68px;
  --ds-content-max: 1440px;
  --ds-page-padding: clamp(24px, 2vw, 32px);
  --ds-page-block-start: clamp(24px, 2vw, 32px);
  --ds-page-block-end: 56px;
  --ds-topbar-height: 68px;
  --ds-section-gap: 24px;
  --ds-card-gap: 18px;
  --ds-card-padding: 22px;
  --ds-card-radius: var(--ds-radius-surface);
  --ds-control-radius: var(--ds-radius-control);
  --ds-control-height: 42px;
  --ds-motion-fast: 140ms;
  --ds-motion-base: 220ms;

  /* Reference breakpoints; media queries use the literal values for browser compatibility. */
  --ds-breakpoint-wide: 1180px;
  --ds-breakpoint-shell: 1024px;
  --ds-breakpoint-mobile: 768px;
  --ds-breakpoint-compact: 540px;

  --bg: var(--ds-bg);
  --surface: var(--ds-surface);
  --surface-soft: var(--ds-surface-subtle);
  --ink: var(--ds-text);
  --muted: var(--ds-text-muted);
  --line: var(--ds-border);
  --line-strong: var(--ds-border-strong);
  --teal: var(--ds-brand);
  --teal-dark: var(--ds-brand-strong);
  --blue: var(--ds-brand);
  --coral: var(--ds-danger);
  --amber: var(--ds-warning);
  --green-soft: var(--ds-brand-soft);
  --blue-soft: var(--ds-brand-soft);
  --coral-soft: var(--ds-danger-soft);
  --shadow: var(--ds-shadow-surface);
}