@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Primary Colors */
  --color-primary: #000000; /* black - Pure black foundation */
  --color-secondary: #1A1A1A; /* gray-900 - Subtle elevation color */
  --color-accent: #00D4FF; /* cyan-400 - Electric cyan for interactive elements */
  
  /* Background Colors */
  --color-background: #0A0A0A; /* gray-950 - Deep charcoal background */
  --color-surface: #141414; /* gray-800 - Elevated surface color */
  
  /* Text Colors */
  --color-text-primary: #FFFFFF; /* white - Pure white for maximum readability */
  --color-text-secondary: #B3B3B3; /* gray-400 - Light gray for supporting text */
  
  /* Status Colors */
  --color-success: #00FF88; /* green-400 - Bright green for positive interactions */
  --color-warning: #FFB800; /* amber-500 - Amber for attention-requiring elements */
  --color-error: #FF4757; /* red-500 - Vibrant red for error states */
  
  /* Border Colors */
  --color-border: #333333; /* gray-700 - Strategic borders for content separation */
}

@layer base {
  body {
    font-family: 'Source Sans 3', sans-serif;
    background-color: var(--color-background);
    color: var(--color-text-primary);
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
  }
}

@layer components {
  .caption-text {
    font-family: 'Roboto', sans-serif;
  }
  
  .data-text {
    font-family: 'JetBrains Mono', monospace;
  }
  
  .shadow-minimal {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  
  .transition-smooth {
    transition: all 200ms ease-out;
  }
  
  .transition-spring {
    transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}