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


:root {
    --carbon-950: #000000;
    --carbon-900: #0a0a0a;
    --carbon-800: #1a1a1a;
              --carbon-700: #2a2a2a;
              --carbon-600: #666666;
              --carbon-500: #808080;
              --carbon-400: #a0a0a0;
              --carbon-300: #c0c0c0;
              --carbon-200: #e0e0e0;
              --carbon-100: #f0f0f0;
              --carbon-50: #f8f8f8;
            
    --mulberry-950: #0b0213;
              --mulberry-900: #1a1426;
              --mulberry-800: #2a2639;
              --mulberry-700: #3a384c;
              --mulberry-600: #4a4a5f;
              --mulberry-500: #5a5c72;
              --mulberry-400: #7a7e95;
              --mulberry-300: #9aa0b8;
              --mulberry-200: #bac2db;
              --mulberry-100: #dae4fe;
              --mulberry-50: #f0f4ff;
            --walnut-950: #1E1815;
              --walnut-900: #403730;
              --walnut-800: #504743;
              --walnut-700: #605756;
              --walnut-600: #706769;
              --walnut-500: #80777c;
              --walnut-400: #90878f;
              --walnut-300: #a09aa2;
              --walnut-200: #b0adb5;
              --walnut-100: #c0c0c8;
              --walnut-50: #d0d3db;
              --walnut-25: #e0e6ee;
    
              --nickel-950: #171717;
              --nickel-900: #2a2a2a;
              --nickel-800: #3d3d3d;
              --nickel-700: #505050;
              --nickel-600: #636363;
              --nickel-500: #767676;
              --nickel-400: #c1bfb1;
              --nickel-300: #d4d2c6;
              --nickel-200: #e7e5db;
              --nickel-100: #faf8f0;
              --nickel-50: #fdfcf8;
            
              --ocean-950: #2a3441;
              --ocean-900: #3a4654;
              --ocean-800: #4a5867;
              --ocean-700: #5a6c80;
              --ocean-600: #6a7e99;
              --ocean-500: #7a90b2;
              --ocean-400: #8ba3c4;
              --ocean-300: #9bb6d6;
              --ocean-200: #abc9e8;
              --ocean-100: #bbdcfa;
              --ocean-50: #cbefff;
              
              --eucalyptus-950: #2a3330;
              --eucalyptus-900: #3a4540;
              --eucalyptus-800: #4a5750;
              --eucalyptus-700: #515d54;
              --eucalyptus-600: #5a6964;
              --eucalyptus-500: #6a7974;
              --eucalyptus-400: #7a8a7f;
              --eucalyptus-300: #8a9b8f;
              --eucalyptus-200: #9aac9f;
              --eucalyptus-100: #aabdaf;
              --eucalyptus-50: #bacfbf;

            --sand-950: #8E7B5E;
            --sand-900: #99886E;
              --sand-800: #A4957E;
              --sand-700: #AFA28E;
              --sand-600: #BAAF9F;
              --sand-500: #C5BCAF;
              --sand-400: #D0C9BF; 
              --sand-300: #DBD6CF; 
              --sand-200: #E6E3DF; 
              --sand-100: #F1F0EF; 
              --sand-50: #F1F0EF; 
            
              --coral-950: #6A4A48;
              --coral-900: #7B5D5A;
              --coral-800: #8C706C;
              --coral-700: #9D8380;
              --coral-600: #AE9693;
              --coral-500: #BFAAA7;
              --coral-400: #D0BDBB;
              --coral-300: #E1D1CF;
              --coral-200: #F2E4E3;
              --coral-100: #9e979c;
              --coral-50: #aea7ac;
            


}
/*
              --font-sans: ['Inter Tight', 'Inter', 'system-ui', 'sans-serif'],
            --font-mono: ['Inconsolata', 'ui-monospace', 'monospace'],
            --font-logo: ['Exo', 'Inter Tight', 'sans-serif']
          },
          spacing: {
            'chorus-xxs':  '0.854rem',
            'chorus-xs':   '0.945rem',
            'chorus-sm':   '1.0rem',
            'chorus-base': '1.25rem',
            'chorus-md':   '1.953rem', 
            'chorus-lg':   '2.441rem',
            'chorus-xl':   '3.052rem',
            'chorus-xxl':  '6.1rem',
          },
          // CHORUS Proportional Typography System (Major Third - 1.25 ratio)
          fontSize: {
            // Base scale using Minor Third (1.20) ratio for harmonious proportions
            'xs':   ['0.854rem', { lineHeight: '1.00rem', fontWeight: '600' }], // 10.24px
            'sm':   ['0.954rem', { lineHeight: '1.10rem', fontWeight: '500' }], // 12.8px
            'base': ['1rem',     { lineHeight: '1.50rem', fontWeight: '400' }], // 16px (foundation)
            'lg':   ['1.25rem',  { lineHeight: '1.75rem', fontWeight: '400' }], // 20px
            'xl':   ['1.563rem', { lineHeight: '2.00rem', fontWeight: '400' }], // 25px
            '2xl':  ['1.953rem', { lineHeight: '2.50rem', fontWeight: '300' }], // 31.25px
            '3xl':  ['2.441rem', { lineHeight: '3.00rem', fontWeight: '200' }], // 39px
            '4xl':  ['3.052rem', { lineHeight: '3.50rem', fontWeight: '100' }], // 48.8px
            '5xl':  ['3.815rem', { lineHeight: '4.00rem', fontWeight: '100' }], // 61px
            
            // Semantic heading sizes for easier usage
            'h7': ['1.000rem', { lineHeight: '1.25rem', fontWeight: '400' }], // 14px  
            'h6': ['1.250rem', { lineHeight: '1.563rem', fontWeight: '500' }], // 16px
            'h5': ['1.563rem', { lineHeight: '1.953rem', fontWeight: '500' }], // 20px  
            'h4': ['1.953rem', { lineHeight: '2.441rem', fontWeight: '600' }], // 25px
            'h3': ['2.441rem', { lineHeight: '3.052rem', fontWeight: '600' }], // 31.25px
            'h2': ['3.052rem', { lineHeight: '4.768rem', fontWeight: '700' }], // 39px
            'h1': ['4.768rem', { lineHeight: '6.96rem', fontWeight: '700' }], // 76.3px


            // Display sizes for hero sections
            'display-sm': ['3.815rem', { lineHeight: '4rem', fontWeight: '800' }],  // 61px
            'display-md': ['4.768rem', { lineHeight: '5rem', fontWeight: '800' }],  // 76.3px
            'display-lg': ['5.96rem', { lineHeight: '6rem', fontWeight: '800' }],   // 95.4px
          },
          
          // Extended rem-based sizing for complete system consistency
          width: {
            'rem-xs':   '0.640rem',
            'rem-sm':   '0.800rem', 
            'rem-base': '1.000rem',
            'rem-lg':   '1.250rem',
            'rem-xl':   '1.563rem',
            'rem-2xl':  '1.953rem',
            'rem-3xl':  '2.441rem',
            'rem-4xl':  '3.052rem',
            'rem-5xl':  '3.815rem',
          },
          
          height: {
            'rem-xs':   '0.640rem',
            'rem-sm':   '0.800rem',
            'rem-base': '1.000rem', 
            'rem-lg':   '1.250rem',
            'rem-xl':   '1.563rem',
            'rem-2xl':  '1.953rem',
            'rem-3xl':  '2.441rem',
            'rem-4xl':  '3.052rem',
            'rem-5xl':  '3.815rem',
          },
          
          // Border radius using proportional scale
          borderRadius: {
            'none': '0',
            'micro': '0.125rem',   // 2px
            'sm': '0.25rem',       // 4px  
            'base': '0.375rem',    // 6px
            'md': '0.5rem',        // 8px
            'lg': '0.75rem',       // 12px
            'xl': '1rem',          // 16px
            'full': '9999px',
          }
*/

/* === 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: #3a384c;
  --color-walnut: #605756;
  --color-nickel: #505050;
  --color-sand: #6a5c46;
  --color-coral: #9D8380;
  --color-ocean: #5a6c80;
  --color-eucalyptus:#515d54;

  /* 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: #0b0213;       /* carbon-950 */
  --bg-secondary: #1a1426;     /* mulberry-950 */
  --bg-tertiary: #2a2639;      /* mulberry-900 */
  --bg-accent: #5b3d77;        /* mulberry-600 */

  /* 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 (apply when html has class 'light') */
html.light {
  --bg-primary: #FFFFFF;
  --bg-secondary: #f8f8f8;
  --bg-tertiary: #f0f0f0;
  --bg-accent: #cbefff;

  --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;
    /* Light mode: warm sand gradient */
    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); }

  /* Dark mode: Mulberry mid-tone for stronger contrast */
  html.dark .btn-primary {
    background: #5b3d77; /* approx mulberry-500 */
    border-color: #5b3d77;
    box-shadow: 0 4px 12px rgba(11, 2, 19, 0.35);
  }
  html.dark .btn-primary:hover {
    filter: brightness(1.08);
  }

  /* 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 p-3 rounded-sm focus:outline-none transition-colors duration-200;
    background-color: var(--bg-secondary);
    border-color: var(--border-defined);
    color: var(--text-primary);
  }
  
  .input-field:focus {
    border-color: var(--chorus-accent);
    background-color: var(--bg-primary);
    ring: 0;
  }

  /* Fix form inputs for dark theme */
  input[type="checkbox"], 
  input[type="radio"], 
  input[type="text"], 
  input[type="email"], 
  input[type="password"], 
  textarea, 
  select {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-defined) !important;
    color: var(--text-primary) !important;
  }

  input[type="checkbox"]:focus, 
  input[type="radio"]:focus, 
  input[type="text"]:focus, 
  input[type="email"]:focus, 
  input[type="password"]:focus, 
  textarea:focus, 
  select:focus {
    border-color: var(--chorus-accent) !important;
    background-color: var(--bg-primary) !important;
  }
  
  .label {
    @apply block text-sm font-medium mb-2;
    color: var(--text-primary);
  }
  
  .error-text {
    @apply text-red-400 text-sm mt-1;
  }
  
  .success-text {
    @apply text-eucalyptus-600 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;
  }
  
  .setup-progress {
    @apply border transition-all duration-200;
  }

  .agreement {
    background-color: var(--sand-400) !important;
  }

  html.dark .agreement {
    background-color: var(--mulberry-800) !important;
  }

  /* Progress Elements */
  .progress-step {
    @apply p-3 rounded-md border transition-all duration-200;
  }
  
  .progress-step-current {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
  }
  
  .progress-step-completed {
    background-color: var(--bg-primary) !important;
    border-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
  }
  
  .progress-step-accessible {
    @apply border-chorus-border-defined hover:border-chorus-border-emphasis text-chorus-text-secondary;
    background-color: var(--bg-secondary);
    border-color: var(--border-defined);
    color: var(--text-secondary);
  }
  
  .progress-step-accessible:hover {
    background-color: var(--bg-accent);
    border-color: var(--border-emphasis);
    color: var(--text-primary);
  }
  
  .progress-step-disabled {
    @apply cursor-not-allowed;
    background-color: var(--bg-subtle);
    border-color: var(--border-subtle);
    color: var(--text-subtle);
  }
  
  /* 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;
  }
}

/* Brand Panel Components */
@layer components {
  .panel { @apply rounded-lg p-4 border; }

  /* Info (Ocean) */
  .panel-info { @apply border-ocean-200 bg-ocean-50; }
  .panel-info .panel-title { @apply text-ocean-800; }
  .panel-info .panel-body { @apply text-ocean-700; }
  html.dark .panel-info { @apply border-ocean-700; background-color: rgba(58,70,84,0.20) !important; }
  html.dark .panel-info .panel-title { @apply text-ocean-300; }
  html.dark .panel-info .panel-body { @apply text-ocean-300; }

  /* Note (Nickel / Neutral) */
  .panel-note { background-color: #f5f4f1; border-color: #e0ddd7; }
  .panel-note .panel-title { @apply text-chorus-text-primary; }
  .panel-note .panel-body { @apply text-chorus-text-secondary; }
  html.dark .panel-note { background-color: rgba(11,2,19,0.20) !important; border-color: var(--border-defined) !important; }
  html.dark .panel-note .panel-title { @apply text-chorus-text-primary; }
  html.dark .panel-note .panel-body { @apply text-chorus-text-secondary; }

  /* Warning (Sand) */
  .panel-warning { @apply bg-sand-100 border-sand-900; }
  .panel-warning .panel-title { @apply text-sand-900; }
  .panel-warning .panel-body { @apply text-sand-900; }
  html.dark .panel-warning { background-color: rgba(106,92,70,0.20) !important; @apply border-sand-900; }
  /* Fallback to white/neutral for readability in dark */
  html.dark .panel-warning .panel-title { @apply text-white; }
  html.dark .panel-warning .panel-body { color: #F1F0EF !important; }

  /* Error (Coral) */
  .panel-error { @apply bg-coral-50 border-coral-950; }
  .panel-error .panel-title { @apply text-coral-950; }
  .panel-error .panel-body { @apply text-coral-950; }
  html.dark .panel-error { background-color: rgba(46,29,28,0.20) !important; @apply border-coral-950; }
  html.dark .panel-error .panel-title { @apply text-white; }
  html.dark .panel-error .panel-body { color: #ffd6d6 !important; }

  /* Success (Eucalyptus) */
  .panel-success { @apply bg-eucalyptus-50 border-eucalyptus-600; }
  .panel-success .panel-title { @apply text-eucalyptus-600; }
  .panel-success .panel-body { @apply text-eucalyptus-600; }
  html.dark .panel-success { background-color: rgba(42,51,48,0.20) !important; @apply border-eucalyptus-400; }
  html.dark .panel-success .panel-title { @apply text-white; }
  html.dark .panel-success .panel-body { color: #bacfbf !important; }
}

/* 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-900 { background-color: #3a4654 !important; }
  .text-ocean-900 { color: #3a4654 !important; }
  .border-ocean-900 { border-color: #3a4654 !important; }

  .text-ocean-800 { color: #4a5867 !important; }
  .border-ocean-800 { border-color: #4a5867 !important; }

  .text-ocean-300 { color: #9bb6d6 !important; }
  .border-ocean-300 { border-color: #9bb6d6 !important; }

  .border-ocean-200 { border-color: #abc9e8 !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-800 { background-color: #3a4843 !important; }
  .bg-eucalyptus-600 { background-color: #5a7060 !important; }
  .bg-eucalyptus-500 { background-color: #6b8570 !important; }
  .bg-eucalyptus-400 { background-color: #7c9a80 !important; }
  .bg-eucalyptus-50 { background-color: #bacfbf !important; }
  .text-eucalyptus-950 { color: #2a3330 !important; }
  .text-eucalyptus-800 { color: #3a4843 !important; }
  .text-eucalyptus-600 { color: #5a7060 !important; }
  .text-eucalyptus-500 { color: #6b8570 !important; }
  .text-eucalyptus-400 { color: #7c9a80 !important; }
  .border-eucalyptus-950 { border-color: #2a3330 !important; }
  .border-eucalyptus-800 { border-color: #3a4843 !important; }
  .border-eucalyptus-600 { border-color: #5a7060 !important; }
  .border-eucalyptus-500 { border-color: #6b8570 !important; }
  .border-eucalyptus-400 { border-color: #7c9a80 !important; }

  /* Utility text/border fallbacks for theme tokens */
  .text-chorus-primary { color: var(--text-primary) !important; }
  .text-chorus-secondary { color: var(--text-secondary) !important; }
  .text-chorus-text-primary { color: var(--text-primary) !important; }
  .text-chorus-text-secondary { color: var(--text-secondary) !important; }
  .text-chorus-text-tertiary { color: var(--text-tertiary) !important; }
  .text-chorus-text-subtle { color: var(--text-subtle) !important; }
  .text-chorus-text-ghost { color: var(--text-ghost) !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; }

/* Dark-mode heading contrast: make headings white unless panel overrides apply */
@layer base {
  html.dark h1:not(.panel-title),
  html.dark h2:not(.panel-title),
  html.dark h3:not(.panel-title),
  html.dark h4:not(.panel-title),
  html.dark h5:not(.panel-title),
  html.dark h6:not(.panel-title) {
    color: #ffffff !important;
  }
}

@layer utilities {
  html.dark .text-h1, html.dark .text-h2, html.dark .text-h3,
  html.dark .text-h4, html.dark .text-h5, html.dark .text-h6 { color: #ffffff !important; }
}