/* QwertyBits Brand Colors & Variables */
:root {
  /* Primary Brand Colors */
  --primary-blue: #2980b9;      /* Main brand blue - professional yet tech-focused */
  --primary-dark: #1e3a8a;      /* Darker blue for emphasis */
  --primary-light: #3b82f6;     /* Lighter blue for accents */
  
  /* Secondary Colors */  
  --secondary-green: #16a085;   /* Tech/code green accent */
  --secondary-orange: #e67e22;  /* Warning/highlight orange */
  --secondary-purple: #8e44ad;  /* Retro/creative purple */
  
  /* Neutral Colors */
  --dark-text: #1a1a1a;         /* Main text color */
  --medium-text: #4a4a4a;       /* Secondary text */
  --light-text: #6b7280;        /* Muted text */
  --border-color: #e5e7eb;      /* Light borders */
  --background: #ffffff;        /* Clean white background */
  --background-alt: #f8fafc;    /* Subtle gray background */
  --background-dark: #0f172a;   /* Dark mode background */
  
  /* Code/Tech Colors */
  --code-bg: #f1f5f9;          /* Light code background */
  --code-border: #cbd5e1;      /* Code block borders */
  --terminal-green: #22c55e;   /* Terminal/success green */
  --error-red: #ef4444;        /* Error/warning red */
  
  /* Spacing & Typography */
  --border-radius: 8px;
  --box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

/* Dark mode colors */
@media (prefers-color-scheme: dark) {
  :root {
    --dark-text: #f1f5f9;
    --medium-text: #cbd5e1;
    --light-text: #94a3b8;
    --border-color: #374151;
    --background: #0f172a;
    --background-alt: #1e293b;
    --code-bg: #1e293b;
    --code-border: #475569;
  }
}

/* Brand-consistent utility classes */
.brand-primary { color: var(--primary-blue); }
.brand-secondary { color: var(--secondary-green); }
.brand-accent { color: var(--secondary-orange); }
.bg-brand-primary { background-color: var(--primary-blue); }
.bg-brand-light { background-color: var(--background-alt); }
.border-brand { border-color: var(--primary-blue); }

/* Typography improvements */
.font-mono { font-family: var(--font-family-mono); }
.text-code { color: var(--secondary-green); font-family: var(--font-family-mono); }