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

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

/* === Teaser-aligned Global Foundation === */
/* CHORUS Proportional Typography System - 16px Base */
html { font-size: 16px; }

/* CHORUS Brand CSS Variables (8-color semantic system) */
:root {
  /* Core Brand Colors */
  --color-carbon: #000000;
  --color-mulberry: #0b0213;
  --color-walnut: #403730;
  --color-nickel: #c1bfb1;

  /* Semantic Tokens */
  --chorus-primary: #0b0213;   /* mulberry */
  --chorus-secondary: #000000; /* carbon */
  --chorus-accent: #403730;    /* walnut */
  --chorus-neutral: #c1bfb1;   /* nickel */
  --chorus-info: #5a6c80;      /* ocean-700 */
  --chorus-success: #2a3330;   /* eucalyptus-950 */
  --chorus-warning: #6a5c46;   /* sand-900 */
  --chorus-danger: #2e1d1c;    /* coral-950 */

  /* Theme Surfaces (dark default) */
  --bg-primary: #000000;       /* carbon-950 */
  --bg-secondary: #0b0213;     /* mulberry-950 */
  --bg-tertiary: #1a1426;      /* mulberry-900 */
  --bg-accent: #2a2639;        /* mulberry-800 */

  /* Text */
  --text-primary: #FFFFFF;
  --text-secondary: #f0f4ff;
  --text-tertiary: #dae4fe;
  --text-subtle: #9aa0b8;
  --text-ghost: #7a7e95;

  /* Borders */
  --border-invisible: #0a0a0a;
  --border-subtle: #1a1a1a;
  --border-defined: #2a2a2a;
  --border-emphasis: #666666;
}

/* Light Theme Variables */
:root:not(.dark) {
  --bg-primary: #FFFFFF;
  --bg-secondary: #f8f8f8;
  --bg-tertiary: #f0f0f0;
  --bg-accent: #e0e0e0;

  --text-primary: #000000;
  --text-secondary: #1a1a1a;
  --text-tertiary: #2a2a2a;
  --text-subtle: #666666;
  --text-ghost: #808080;

  --border-invisible: #f8f8f8;
  --border-subtle: #f0f0f0;
  --border-defined: #e0e0e0;
  --border-emphasis: #c0c0c0;
}

/* Base Styles */
body {
  font-family: 'Inter Tight', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  line-height: 1.6;
  font-size: 1rem;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@layer base {
  html {
    font-family: 'Inter Tight', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  }
  
  body { @apply transition-colors duration-200; }
}

@layer components {
  /* Ultra-Minimalist Button System */
  .btn-primary {
    @apply text-white font-semibold py-3 px-6 rounded-md transition-all duration-300 disabled:opacity-40 disabled:cursor-not-allowed;
    background: linear-gradient(135deg, var(--chorus-warning) 0%, var(--chorus-neutral) 100%);
    border: 2px solid var(--chorus-warning);
  }
  
  .btn-secondary {
    @apply bg-transparent text-current font-medium py-3 px-6 rounded-md transition-all duration-300 disabled:opacity-40 disabled:cursor-not-allowed;
    border: 2px solid var(--border-emphasis);
  }

  .btn-primary:hover { transform: translateY(-2px); }
  .btn-secondary:hover { transform: translateY(-2px); border-color: var(--text-primary); }

  /* Teaser-aligned Form Elements */
  .form-input {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 2px solid var(--border-defined);
    padding: 0.875rem 1rem;
    font-size: 1rem;
    width: 100%;
    border-radius: 0.375rem;
    transition: all 300ms ease-out;
  }
  .form-input:focus { outline: none; border-color: var(--chorus-primary); box-shadow: 0 0 0 3px rgba(11,2,19,0.1); background: var(--bg-secondary); }
  .form-input::placeholder { color: var(--text-subtle); }
  }
  
  .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-chorus-white border border-chorus-border-subtle p-8 rounded-lg transition-colors duration-200;
  }
  
  .card-elevated {
    @apply bg-chorus-warm border border-chorus-border-invisible p-8 rounded-lg transition-colors duration-200;
  }
  
  /* Form Elements */
  .input-field {
    @apply block w-full border border-chorus-border-defined p-3 rounded-sm focus:border-chorus-secondary focus:outline-none transition-colors duration-200 bg-chorus-white text-chorus-text-primary;
  }
  
  .input-field:focus {
    @apply border-chorus-secondary ring-0;
  }
  
  .label {
    @apply block text-sm font-medium text-chorus-text-primary 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-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-subtle;
  }
  
  .text-ghost {
    @apply text-sm text-gray-500 dark:text-gray-500;
  }
}

/* Teaser-aligned color aliases */
@layer utilities {
  /* 8 standard color families - key shades */
  /* Ocean */
  /* Ocean scale aliases (selected commonly used steps) */
  .bg-ocean-700 { background-color: #5a6c80 !important; }
  .text-ocean-700 { color: #5a6c80 !important; }
  .border-ocean-700 { border-color: #5a6c80 !important; }

  .bg-ocean-600 { background-color: #6a7e99 !important; }
  .text-ocean-600 { color: #6a7e99 !important; }
  .border-ocean-600 { border-color: #6a7e99 !important; }

  .bg-ocean-500 { background-color: #7a90b2 !important; }
  .text-ocean-500 { color: #7a90b2 !important; }
  .border-ocean-500 { border-color: #7a90b2 !important; }

  .bg-ocean-50 { background-color: #cbefff !important; }
  .text-ocean-50 { color: #cbefff !important; }
  .border-ocean-50 { border-color: #cbefff !important; }

  /* Mulberry */
  .bg-mulberry-950 { background-color: #0b0213 !important; }
  .text-mulberry-950 { color: #0b0213 !important; }
  .border-mulberry-950 { border-color: #0b0213 !important; }

  /* Carbon */
  .bg-carbon-950 { background-color: #000000 !important; }
  .text-carbon-950 { color: #000000 !important; }
  .border-carbon-950 { border-color: #000000 !important; }

  /* Walnut */
  .bg-walnut-900 { background-color: #403730 !important; }
  .text-walnut-900 { color: #403730 !important; }
  .border-walnut-900 { border-color: #403730 !important; }

  /* Nickel */
  .bg-nickel-500 { background-color: #c1bfb1 !important; }
  .text-nickel-500 { color: #c1bfb1 !important; }
  .border-nickel-500 { border-color: #c1bfb1 !important; }

  /* Coral */
  .bg-coral-950 { background-color: #2e1d1c !important; }
  .bg-coral-50 { background-color: #ffd6d6 !important; }
  .text-coral-950 { color: #2e1d1c !important; }
  .border-coral-950 { border-color: #2e1d1c !important; }

  /* Sand */
  .bg-sand-900 { background-color: #6a5c46 !important; }
  .bg-sand-100 { background-color: #F1F0EF !important; }
  .text-sand-900 { color: #6a5c46 !important; }
  .border-sand-900 { border-color: #6a5c46 !important; }

  /* Eucalyptus */
  .bg-eucalyptus-950 { background-color: #2a3330 !important; }
  .bg-eucalyptus-50 { background-color: #bacfbf !important; }
  .text-eucalyptus-950 { color: #2a3330 !important; }
  .border-eucalyptus-950 { border-color: #2a3330 !important; }

  /* Utility text/border fallbacks for theme tokens */
  .text-chorus-primary { color: var(--text-primary) !important; }
  .text-chorus-secondary { color: var(--text-secondary) !important; }
  .bg-chorus-primary { background-color: var(--bg-primary) !important; }
  .bg-chorus-white { background-color: var(--bg-secondary) !important; }
  .bg-chorus-warm { background-color: var(--bg-tertiary) !important; }
  .border-chorus-border-subtle { border-color: var(--border-subtle) !important; }
  .border-chorus-border-defined { border-color: var(--border-defined) !important; }
  .border-chorus-border-invisible { border-color: var(--border-invisible) !important; }
}

/* CHORUS Typography utilities (subset) */
.text-h1 { font-size: 4.268rem; line-height: 6.96rem; font-weight: 100; letter-spacing: -0.02em; }
.text-h2 { font-size: 3.052rem; line-height: 4.768rem; font-weight: 700; }
.text-h3 { font-size: 2.441rem; line-height: 3.052rem; font-weight: 600; }
.text-h4 { font-size: 1.953rem; line-height: 2.441rem; font-weight: 600; }
.text-h5 { font-size: 1.563rem; line-height: 1.953rem; font-weight: 500; }
.text-h6 { font-size: 1.25rem;  line-height: 1.563rem; font-weight: 500; }

/* Motion */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn 0.6s ease-out; }
.animate-slide-up { animation: slideUp 0.8s ease-out; }