:root {
  --font-primary: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --control-height: 44px;
  --control-height-compact: 38px;
  --control-radius: 10px;
  --button-radius: 10px;
  --card-radius: 14px;
  --modal-radius: 16px;
  --color-primary: #0f766e;
  --color-primary-hover: #0b665f;
  --color-primary-soft: #e8f5f3;
  --color-text: #172033;
  --color-text-secondary: #475569;
  --color-muted: #64748b;
  --color-border: #d7e0e8;
  --color-border-strong: #c5d0da;
  --color-surface: #ffffff;
  --color-background: #f6f8fa;
  --color-surface-muted: #f8fafc;
  --color-success: #15803d;
  --color-success-soft: #ecfdf3;
  --color-warning: #b45309;
  --color-warning-soft: #fff7ed;
  --color-danger: #dc2626;
  --color-danger-soft: #fef2f2;
  --color-info: #2563eb;
  --color-info-soft: #eff6ff;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);
  --focus-ring: 0 0 0 3px rgba(15, 118, 110, 0.18);

  /* Compatibility aliases for existing modules while they use the shared layer. */
  --ink: var(--color-text);
  --muted: var(--color-muted);
  --paper: var(--color-background);
  --white: var(--color-surface);
  --teal: var(--color-primary);
  --line: var(--color-border);
  --shadow: var(--shadow-md);
  --radius: var(--card-radius);
}