bzzz/install/config-ui/app/globals.css

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

@layer base {
  html {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  }
  
  body {
    @apply bg-chorus-paper text-chorus-text-primary transition-colors duration-200;
  }
}

@layer components {
  /* Ultra-Minimalist Button System */
  .btn-primary {
    @apply bg-chorus-primary hover:opacity-90 text-white font-medium py-3 px-6 rounded-md transition-opacity duration-200 disabled:opacity-40 disabled:cursor-not-allowed border-none;
  }
  
  .btn-secondary {
    @apply bg-transparent border border-chorus-secondary text-chorus-secondary hover:bg-chorus-secondary hover:text-white font-medium py-3 px-6 rounded-md transition-all duration-200 disabled:opacity-40 disabled:cursor-not-allowed;
  }
  
  .btn-outline {
    @apply border border-chorus-primary text-chorus-primary hover:bg-chorus-primary hover:text-white font-medium py-3 px-6 rounded-md transition-all duration-200;
  }
  
  .btn-text {
    @apply bg-transparent text-chorus-secondary hover:text-white font-medium py-2 px-0 border-none transition-colors duration-200;
  }
  
  /* Clean Card System */
  .card {
    @apply bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-8 rounded-lg transition-colors duration-200;
  }
  
  .card-elevated {
    @apply bg-gray-50 dark:bg-gray-800 border border-gray-100 dark:border-gray-600 p-8 rounded-lg transition-colors duration-200;
  }
  
  /* Form Elements */
  .input-field {
    @apply block w-full border border-gray-300 dark:border-gray-600 p-3 rounded-sm focus:border-chorus-secondary focus:outline-none transition-colors duration-200 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100;
  }
  
  .input-field:focus {
    @apply border-chorus-secondary ring-0;
  }
  
  .label {
    @apply block text-sm font-medium text-gray-900 dark:text-gray-100 mb-2;
  }
  
  .error-text {
    @apply text-red-400 text-sm mt-1;
  }
  
  .success-text {
    @apply text-green-400 text-sm mt-1;
  }
  
  /* Status System */
  .status-indicator {
    @apply text-xs font-medium;
  }
  
  .status-online {
    @apply status-indicator text-chorus-secondary;
  }
  
  .status-offline {
    @apply status-indicator text-chorus-text-subtle;
  }
  
  .status-pending {
    @apply status-indicator text-chorus-brown;
  }
  
  /* Progress Elements */
  .progress-step {
    @apply p-3 rounded-md border transition-all duration-200;
  }
  
  .progress-step-current {
    @apply border-chorus-secondary bg-chorus-secondary bg-opacity-20 text-chorus-secondary;
  }
  
  .progress-step-completed {
    @apply border-chorus-secondary bg-chorus-secondary bg-opacity-10 text-chorus-secondary;
  }
  
  .progress-step-accessible {
    @apply border-chorus-border-defined hover:border-chorus-border-emphasis text-chorus-text-secondary;
  }
  
  .progress-step-disabled {
    @apply border-chorus-border-invisible text-chorus-text-subtle cursor-not-allowed;
  }
  
  /* Typography Hierarchy */
  .heading-hero {
    @apply text-3xl font-semibold text-gray-900 dark:text-gray-100 tracking-tight;
  }
  
  .heading-section {
    @apply text-2xl font-semibold text-gray-900 dark:text-gray-100;
  }
  
  .heading-subsection {
    @apply text-lg font-medium text-gray-100 dark:text-gray-200;
  }
  
  .text-body {
    @apply text-base text-gray-700 dark:text-gray-300 leading-relaxed;
  }
  
  .text-small {
    @apply text-sm text-gray-600 dark:text-gray-400;
  }
  
  .text-ghost {
    @apply text-sm text-gray-500 dark:text-gray-500;
  }
}