:root {
  /* Canonical colour tokens */
  --ui2-brand-primary: #10233f;
  --ui2-brand-secondary: #d72f3f;
  --ui2-brand-accent: #f4c84c;
  --ui2-surface: #ffffff;
  --ui2-surface-muted: #f7f7f4;
  --ui2-text-primary: #172033;
  --ui2-text-secondary: #667085;
  --ui2-border: #e5e7eb;
  --ui2-focus: #155eef;
  --ui2-danger: #b42318;
  --ui2-warning: #b54708;
  --ui2-success: #067647;

  /* Hub accents: identity only, never a replacement interaction system */
  --ui2-recipe-accent: #d72f3f;
  --ui2-housework-accent: #4b6fd8;
  --ui2-safety-accent: #d59f19;
  --ui2-atlas-accent: #568841;
  --ui2-employer-visual-accent: #8b5fbf;
  --ui2-hiring-guide-accent: #b7791f;

  /* Six-level type scale */
  --ui2-font-family: Inter, "Noto Sans TC", "PingFang HK", "Microsoft JhengHei", system-ui, sans-serif;
  --ui2-type-display-size: clamp(2.65rem, 5vw, 4.9rem);
  --ui2-type-display-line-height: 1.05;
  --ui2-type-display-weight: 850;
  --ui2-type-h1-size: clamp(2.3rem, 4vw, 4rem);
  --ui2-type-h1-line-height: 1.12;
  --ui2-type-h1-weight: 850;
  --ui2-type-h2-size: clamp(1.85rem, 3vw, 2.75rem);
  --ui2-type-h2-line-height: 1.14;
  --ui2-type-h2-weight: 820;
  --ui2-type-h3-size: clamp(1.05rem, 1.3vw, 1.3rem);
  --ui2-type-h3-line-height: 1.35;
  --ui2-type-h3-weight: 800;
  --ui2-type-body-size: 1rem;
  --ui2-type-body-line-height: 1.65;
  --ui2-type-body-weight: 400;
  --ui2-type-metadata-size: .83rem;
  --ui2-type-metadata-line-height: 1.45;
  --ui2-type-metadata-weight: 650;

  /* Reusable spacing only */
  --ui2-space-xs: .35rem;
  --ui2-space-sm: .65rem;
  --ui2-space-md: 1rem;
  --ui2-space-lg: 1.5rem;
  --ui2-space-xl: 2.25rem;
  --ui2-space-2xl: 3.5rem;

  --ui2-radius-sm: 11px;
  --ui2-radius-md: 18px;
  --ui2-radius-lg: 28px;
  --ui2-radius-pill: 999px;

  --ui2-shadow-card: 0 8px 24px rgba(16, 35, 63, .08);
  --ui2-shadow-floating: 0 18px 44px rgba(16, 35, 63, .11);

  --ui2-content-max-width: 1240px;
  --ui2-reading-max-width: 760px;
  --ui2-page-padding-mobile: 14px;
  --ui2-page-padding-tablet: 18px;
  --ui2-page-padding-desktop: 24px;
  --ui2-header-height: 74px;
  --ui2-breakpoint-shell-collapse: 1120px;
  --ui2-breakpoint-reading: 800px;
  --ui2-breakpoint-mobile: 430px;
  --ui2-breakpoint-narrow: 370px;

  /* v1 backward-compatible aliases used by the proven Phase 6A/6B adapters */
  --ui2-navy: var(--ui2-brand-primary);
  --ui2-navy-soft: #1d3658;
  --ui2-red: var(--ui2-brand-secondary);
  --ui2-red-dark: #b61f30;
  --ui2-gold: var(--ui2-brand-accent);
  --ui2-blue: #5579e8;
  --ui2-ink: var(--ui2-text-primary);
  --ui2-muted: var(--ui2-text-secondary);
  --ui2-line: var(--ui2-border);
  --ui2-surface-alt: var(--ui2-surface-muted);
  --ui2-pastel-yellow: #fff8dc;
  --ui2-pastel-blue: #eef4ff;
  --ui2-pastel-red: #fff0f1;
  --ui2-display: var(--ui2-type-display-size);
  --ui2-font-display: var(--ui2-font-family);
  --ui2-h1: var(--ui2-type-h1-size);
  --ui2-h2: var(--ui2-type-h2-size);
  --ui2-h3: var(--ui2-type-h3-size);
  --ui2-body: var(--ui2-type-body-size);
  --ui2-meta: var(--ui2-type-metadata-size);
  --ui2-content: min(var(--ui2-content-max-width), calc(100% - (2 * var(--ui2-page-padding-desktop))));
  --ui2-reading: var(--ui2-reading-max-width);
  --ui2-space-1: var(--ui2-space-xs);
  --ui2-space-2: var(--ui2-space-sm);
  --ui2-space-3: var(--ui2-space-md);
  --ui2-space-4: var(--ui2-space-lg);
  --ui2-space-5: var(--ui2-space-xl);
  --ui2-space-6: var(--ui2-space-2xl);
  --ui2-radius-xl: var(--ui2-radius-lg);
  --ui2-shadow-soft: var(--ui2-shadow-card);
  --ui2-shadow: var(--ui2-shadow-floating);
  --ui2-hub-accent: var(--ui2-brand-accent);
}