:root {
  /* Brand Colors */
  --gb-color-primary: #D32F2F;
  --gb-color-primary-dark: #B71C1C;
  --gb-color-primary-deep: #B91C1C;
  --gb-color-primary-light: #FFCDD2;

  --gb-color-action: #FFC107;
  --gb-color-action-dark: #FFB300;
  --gb-color-action-soft: #FFF8E1;
  --gb-color-action-light: #FFF8E1;

  --gb-color-accent: #0056B3;
  --gb-color-accent-dark: #004494;
  --gb-color-accent-soft: #BBDEFB;

  --gb-color-slate: #0F172A;
  --gb-color-slate-hover: #1e293b;

  /* Surfaces */
  --gb-color-bg: #F4F6F8;
  --gb-color-bg-alt: #E2E8F0;
  --gb-color-surface: #FFFFFF;

  /* Text */
  --gb-color-text: #212121;
  --gb-color-muted: #616161;
  --gb-color-disabled: #9E9E9E;
  --gb-color-border: #E0E0E0;
  --gb-color-border-hover: #BDBDBD;

  /* Feedback */
  --gb-color-success: #2E7D32;
  --gb-color-success-bg: #E8F5E9;
  --gb-color-warning: #ED6C02;
  --gb-color-warning-bg: #FFF3E0;
  --gb-color-error: #D32F2F;
  --gb-color-error-bg: #FFEBEE;
  --gb-color-info: #0288D1;
  --gb-color-info-bg: #E1F5FE;

  /* Typography */
  --gb-font-ui: Inter, Roboto, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gb-font-heading: "Roboto Condensed", Inter, Roboto, system-ui, sans-serif;
  --gb-font-mono: "Roboto Mono", "SFMono-Regular", Consolas, monospace;

  --gb-text-xs: 0.75rem;
  --gb-text-sm: 0.875rem;
  --gb-text-base: 1rem;
  --gb-text-lg: 1.125rem;
  --gb-text-xl: 1.5rem;
  --gb-text-2xl: 2rem;
  --gb-text-3xl: 2.5rem;
  --gb-text-4xl: 3.25rem;

  /* Layout */
  --gb-container: 1200px;
  --gb-container-wide: 1400px;
  --gb-container-narrow: 880px;

  /* Spacing */
  --gb-space-1: 4px;
  --gb-space-2: 8px;
  --gb-space-3: 12px;
  --gb-space-4: 16px;
  --gb-space-5: 24px;
  --gb-space-6: 32px;
  --gb-space-7: 48px;
  --gb-space-8: 64px;
  --gb-space-9: 96px;

  /* Radii */
  --gb-radius: 5px;
  --gb-radius-sm: 3px;
  --gb-radius-lg: 8px;

  /* Breakpoints (for reference in JS or custom props) */
  --gb-bp-sm: 480px;
  --gb-bp-md: 768px;
  --gb-bp-lg: 1024px;
  --gb-bp-xl: 1200px;
  --gb-bp-2xl: 1400px;

  /* Shadows */
  --gb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --gb-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  --gb-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.1);
  --gb-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
}