:root {
  /* Semantic color mapping */
  --background:       hsl(var(--ub-background));
  --background-alt:   hsl(var(--ub-background-alt));
  --surface:          hsl(var(--ub-surface));
  --surface-hover:    hsl(var(--ub-surface-hover));
  --foreground:       hsl(var(--ub-foreground));
  --foreground-muted: hsl(var(--ub-foreground-muted));
  --border:           hsl(var(--ub-border));
  --primary:          hsl(var(--ub-primary));
  --primary-hover:    hsl(var(--ub-primary-hover));
  --primary-fg:       hsl(var(--ub-primary-fg));
  --success:          hsl(var(--ub-success));
  --warning:          hsl(var(--ub-warning));
  --destructive:      hsl(var(--ub-destructive));

  /* Typography */
  --font-sans:  'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;

  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  --leading-tight:  1.25;
  --leading-normal: 1.5;

  /* Spacing */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;

  /* Border Radius */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 2px hsl(var(--ub-background) / 0.3);
  --shadow-md:  0 4px 6px hsl(var(--ub-background) / 0.3);
  --shadow-lg:  0 10px 15px hsl(var(--ub-background) / 0.3);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
}