/* Import Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --font-sans: 'Inter', 'Arial', system-ui, sans-serif;
  
  /* Mattering Color System */
  --color-mattering-black: #000000;
  --color-mattering-white: #FFFFFF;
  --color-mattering-blue: #00BFFF;
  --color-mattering-gray: #666666;
  --color-mattering-silver: #E5E5E5;
  --color-mattering-silver-muted: #A0A0A0;
  --color-mattering-border: #333333;
  
  /* Semantic Design Tokens */
  --color-background: #FFFFFF;
  --color-foreground: #000000;
  --color-muted: #F9FAFB;
  --color-muted-foreground: #666666;
  --color-accent: #00BFFF;
  --color-accent-foreground: #FFFFFF;
  --color-border: #E5E7EB;
  --color-input: #E5E7EB;
  --color-ring: #00BFFF;
  
  /* Status Colors */
  --color-success: #10B981;
  --color-success-light: #D1FAE5;
  --color-warning: #F59E0B;
  --color-warning-light: #FEF3C7;
  --color-error: #EF4444;
  --color-error-light: #FEE2E2;
  --color-info: #3B82F6;
  --color-info-light: #DBEAFE;
  
  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
  
  /* Legacy support (mapping to Mattering colors) */
  --mattering-black: var(--color-mattering-black);
  --mattering-white: var(--color-mattering-white);
  --mattering-blue: var(--color-mattering-blue);
  --mattering-gray: var(--color-mattering-gray);
  --mattering-silver: var(--color-mattering-silver);
  --mattering-silver-muted: var(--color-mattering-silver-muted);
  --mattering-border: var(--color-mattering-border);
  --primary-color: var(--color-mattering-blue);
  --primary-dark: #0099CC;
  --secondary-color: var(--color-mattering-gray);
}

/* Base Styles */
* {
  font-family: var(--font-sans);
}

body {
  font-family: var(--font-sans);
  color: var(--color-foreground);
  background-color: var(--color-background);
  line-height: 1.5;
  font-size: 16px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #F3F4F6;
}

::-webkit-scrollbar-thumb {
  background: var(--color-mattering-blue);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #0099CC;
}

/* Focus Styles */
*:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

/* Bootstrap Overrides */
.btn-primary {
  background-color: var(--color-mattering-blue);
  border-color: var(--color-mattering-blue);
}

.btn-primary:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
}

.text-mattering-blue {
  color: var(--color-mattering-blue) !important;
}

.bg-mattering-blue {
  background-color: var(--color-mattering-blue) !important;
}

/* Custom utility classes */
.bg-mattering-blue\/10 {
  background-color: rgba(0, 191, 255, 0.1);
}

.text-mattering-blue {
  color: var(--color-mattering-blue);
}