// Breakpoints
$bp-mobile: 576px;
$bp-tablet: 768px;
$bp-desktop: 992px;
$bp-wide: 1200px;
$bp-ultra: 1400px;

// Layout
$sidebar-width: 260px;
$sidebar-collapsed-width: 64px;
$topbar-height: 56px;
$page-padding-x: 1.5rem;
$page-padding-y: 1.25rem;

// Spacing (8px base)
$space-xs: 0.25rem;
$space-sm: 0.5rem;
$space-md: 1rem;
$space-lg: 1.5rem;
$space-xl: 2rem;
$space-2xl: 3rem;

// Typography
$font-size-xs: 0.75rem;
$font-size-sm: 0.875rem;
$font-size-base: 1rem;
$font-size-lg: 1.125rem;
$font-size-xl: 1.25rem;
$font-size-2xl: 1.5rem;

// Border Radius
$radius-sm: 6px;
$radius-md: 8px;
$radius-lg: 12px;

// Z-Index
$z-sidebar: 100;
$z-topbar: 110;
$z-overlay: 200;
$z-dialog: 300;
$z-toast: 400;

// Semantic Colors (PrimeReact tokens)
$color-surface: var(--p-surface-0);
$color-surface-card: var(--p-surface-0);
$color-surface-hover: var(--p-surface-100);
$color-border: var(--p-surface-200);
$color-text: var(--p-text-color);
$color-text-muted: var(--p-text-muted-color);
$color-primary: var(--p-primary-color);
$color-danger: var(--p-red-500);
$color-success: var(--p-green-500);
$color-warning: var(--p-yellow-500);
