@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&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 canvas for artwork prominence */
  --color-secondary: #1a1a1a; /* gray-900 - Subtle depth without visual competition */
  --color-accent: #00FFFF; /* cyan-400 - Electric blue for focused interactions */
  
  /* Background Colors */
  --color-background: #0a0a0a; /* gray-950 - Slightly lifted black for content areas */
  --color-surface: #2a2a2a; /* gray-800 - Card backgrounds with gentle separation */
  
  /* Text Colors */
  --color-text-primary: #FFFFFF; /* white - Clean contrast for extended reading */
  --color-text-secondary: #CCCCCC; /* gray-300 - Clear hierarchy without harshness */
  
  /* Status Colors */
  --color-success: #00FF88; /* green-400 - Positive confirmation with energy */
  --color-warning: #FFB800; /* amber-500 - Attention without alarm */
  --color-error: #FF4444; /* red-500 - Clear concern with approachability */
  
  /* Border Colors */
  --color-border-subtle: rgba(255, 255, 255, 0.1); /* white with 10% opacity */
  --color-border-accent: #00FFFF; /* cyan-400 - For active states and focus */
  
  /* Shadow Colors */
  --shadow-accent: rgba(0, 255, 255, 0.1); /* cyan with 10% opacity */
  --shadow-primary: rgba(0, 0, 0, 0.3); /* black with 30% opacity */
}

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

@layer components {
  .btn-primary {
    @apply bg-accent text-primary font-montserrat font-semibold px-6 py-3 rounded-lg transition-all duration-300 ease-out hover:shadow-accent-glow;
  }
  
  .card-surface {
    @apply bg-surface border border-border-subtle rounded-lg shadow-primary;
  }
  
  .text-accent-mono {
    font-family: 'JetBrains Mono', monospace;
  }
  
  .shadow-primary {
    box-shadow: 0 4px 20px var(--shadow-primary);
  }
  
  .shadow-accent-glow {
    box-shadow: 0 4px 20px var(--shadow-accent);
  }
  
  .border-accent-focus {
    border: 2px solid var(--color-accent);
  }
  
  .transition-smooth {
    transition: all 300ms ease-out;
  }
  
  .transition-micro {
    transition: all 200ms ease-out;
  }
}