/* First, define all CSS variables in :root for global availability */
:root {
  /* Background Colors */
  --bg-base: #1e1e2e;           /* Main background */
  --bg-surface: #252536;         /* Card/component background */
  --bg-element: #313244;         /* Element background */
  --bg-accent: #3a4055;          /* Header/section background */
  --bg-dark: #11111b;            /* Code/deep background */
  
  /* Status Background Colors */
  --bg-success: #304054;
  --bg-failure: #574151;
  --bg-error: #3a313a;
  --bg-error-dark: #453342;
  
  /* Text Colors */
  --text-primary: white;       /* Main text */
  --text-secondary: #a6adc8;     /* Secondary text */
  --text-muted: #7f849c;         /* Muted/hint text */

  /* Action */
  --color-action-primary: #306ffd;      /* Primary brand color (links, buttons) */
  --color-action-primary-hover: #4a84ff; /* Primary color hover state */
  --color-action-primary-disabled: #3464b8; /* Disabled state */
  --color-action-success: #28C76F;      /* Success indicators */
  --color-action-error: #e53e3e;        /* Error indicators */
  --color-action-warning: yellow;      /* Warning indicators */
  --color-action-cancel: #4a5568;      /* Warning indicators */
  
  /* Accent/Status Colors */
  --color-primary: #89b4fa;      /* Primary brand color (links, buttons) */
  --color-primary-hover: #a5c8ff; /* Primary color hover state */
  --color-success: #a6e3a1;      /* Success indicators */
  --color-error: #f38ba8;        /* Error indicators */
  --color-warning: #f9e2af;      /* Warning indicators */
  --color-neutral: #a6adc8;      /* Neutral indicators */
  
  /* Border Colors */
  --border-primary: #45475a;
  --border-subtle: #383a52;
  
  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 10px;
  --space-lg: 15px;
  --space-xl: 20px;
  --space-2xl: 24px;
  
  /* Font Sizes */
  --text-xs: 10px;
  --text-sm: 12px;
  --text-md: 14px;
  --text-md-lg: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  
  /* Borders */
  --border-radius-sm: 3px;
  --border-radius-md: 4px;
  --border-radius-lg: 8px;
  
  /* Shadows */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 4px 15px rgba(0, 0, 0, 0.3);
  
  /* Transitions */
  --transition-default: 0.3s;
  --transition-fast: 0.2s;
  
  /* Font Families */
  --font-main: -apple-system, 'Montserrat', BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* Then keep your #root element styling */
#root {  
    color: #fafafa;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
    padding: 0;
    margin: 0;
    overflow: hidden;
    height: auto;
}