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 {
    background-color: theme('colors.chorus-paper');
    color: theme('colors.chorus-text-primary');
  }
}

@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-chorus-primary font-medium py-2 px-0 border-none transition-colors duration-200;
  }
  
  /* Clean Card System */
  .card {
    @apply bg-white border border-chorus-border-invisible p-8 rounded-lg;
  }
  
  .card-elevated {
    @apply bg-chorus-warm border border-chorus-border-subtle p-8 rounded-lg;
  }
  
  /* Form Elements */
  .input-field {
    @apply block w-full border border-chorus-border-defined p-3 rounded-sm focus:border-chorus-primary focus:outline-none transition-colors duration-200 bg-white;
  }
  
  .input-field:focus {
    @apply border-chorus-primary ring-0;
  }
  
  .label {
    @apply block text-sm font-medium text-chorus-text-primary mb-2;
  }
  
  .error-text {
    @apply text-red-600 text-sm mt-1;
  }
  
  .success-text {
    @apply text-chorus-secondary text-sm mt-1;
  }
  
  /* Minimalist 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-primary bg-chorus-primary bg-opacity-5 text-chorus-primary;
  }
  
  .progress-step-completed {
    @apply border-chorus-secondary bg-chorus-secondary bg-opacity-5 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-chorus-text-primary tracking-tight;
  }
  
  .heading-section {
    @apply text-2xl font-semibold text-chorus-text-primary;
  }
  
  .heading-subsection {
    @apply text-lg font-medium text-chorus-text-primary;
  }
  
  .text-body {
    @apply text-base text-chorus-text-secondary leading-relaxed;
  }
  
  .text-small {
    @apply text-sm text-chorus-text-tertiary;
  }
  
  .text-ghost {
    @apply text-sm text-chorus-text-ghost;
  }
}