@import 'tailwindcss';

html,
body {
  width: 600px;
  min-height: 400px;
  max-height: 600px;
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: hsl(var(--bg-000, 0 0% 100%));
  color: hsl(var(--text-000, 0 0% 0%));
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Claude theme definitions */
[data-theme=claude],[data-theme=claude][data-mode=light] {
    --accent-brand: 15 63.1% 59.6%;
    --accent-main-000: 15 55.6% 52.4%;
    --accent-main-100: 15 55.6% 52.4%;
    --accent-main-200: 15 63.1% 59.6%;
    --accent-main-900: 0 0% 0%;
    --accent-pro-000: 251 34.2% 33.3%;
    --accent-pro-100: 251 40% 45.1%;
    --accent-pro-200: 251 61% 72.2%;
    --accent-pro-900: 253 33.3% 91.8%;
    --accent-secondary-000: 210 73.7% 40.2%;
    --accent-secondary-100: 210 70.9% 51.6%;
    --accent-secondary-200: 210 70.9% 51.6%;
    --accent-secondary-900: 211 72% 90%;
    --bg-000: 0 0% 100%;
    --bg-100: 48 33.3% 97.1%;
    --bg-200: 53 28.6% 94.5%;
    --bg-300: 48 25% 92.2%;
    --bg-400: 50 20.7% 88.6%;
    --bg-500: 50 20.7% 88.6%;
    --border-100: 30 3.3% 11.8%;
    --border-200: 30 3.3% 11.8%;
    --border-300: 30 3.3% 11.8%;
    --border-400: 30 3.3% 11.8%;
    --danger-000: 0 61.4% 22.4%;
    --danger-100: 0 58.6% 34.1%;
    --danger-200: 0 58.6% 34.1%;
    --danger-900: 0 50% 95%;
    --oncolor-100: 0 0% 100%;
    --oncolor-200: 60 6.7% 97.1%;
    --oncolor-300: 60 6.7% 97.1%;
    --text-000: 60 2.6% 7.6%;
    --text-100: 60 2.6% 7.6%;
    --text-200: 60 2.5% 23.3%;
    --text-300: 60 2.5% 23.3%;
    --text-400: 51 3.1% 43.7%;
    --text-500: 51 3.1% 43.7%
}

[data-theme=claude][data-mode=dark] {
    --accent-brand: 15 63.1% 59.6%;
    --accent-main-000: 15 55.6% 52.4%;
    --accent-main-100: 15 63.1% 59.6%;
    --accent-main-200: 15 63.1% 59.6%;
    --accent-main-900: 0 0% 0%;
    --accent-pro-000: 251 84.6% 74.5%;
    --accent-pro-100: 251 40.2% 54.1%;
    --accent-pro-200: 251 40% 45.1%;
    --accent-pro-900: 250 25.3% 19.4%;
    --accent-secondary-000: 210 71.1% 62%;
    --accent-secondary-100: 210 70.9% 51.6%;
    --accent-secondary-200: 210 70.9% 51.6%;
    --accent-secondary-900: 210 55.9% 24.6%;
    --bg-000: 60 2.1% 18.4%;
    --bg-100: 60 2.7% 14.5%;
    --bg-200: 30 3.3% 11.8%;
    --bg-300: 60 2.6% 7.6%;
    --bg-400: 60 3.4% 5.7%;
    --bg-500: 60 3.4% 5.7%;
    --border-100: 51 16.5% 84.5%;
    --border-200: 51 16.5% 84.5%;
    --border-300: 51 16.5% 84.5%;
    --border-400: 51 16.5% 84.5%;
    --danger-000: 0 73.1% 66.5%;
    --danger-100: 0 58.6% 34.1%;
    --danger-200: 0 58.6% 34.1%;
    --danger-900: 0 23% 15.6%;
    --oncolor-100: 0 0% 100%;
    --oncolor-200: 60 6.7% 97.1%;
    --oncolor-300: 60 6.7% 97.1%;
    --text-000: 48 33.3% 97.1%;
    --text-100: 48 33.3% 97.1%;
    --text-200: 50 9% 73.7%;
    --text-300: 50 9% 73.7%;
    --text-400: 48 4.8% 59.2%;
    --text-500: 48 4.8% 59.2%
}

@media (prefers-color-scheme: dark) {
    [data-theme=claude] {
        --accent-brand:15 63.1% 59.6%;
        --accent-main-000: 15 55.6% 52.4%;
        --accent-main-100: 15 63.1% 59.6%;
        --accent-main-200: 15 63.1% 59.6%;
        --accent-main-900: 0 0% 0%;
        --accent-pro-000: 251 84.6% 74.5%;
        --accent-pro-100: 251 40.2% 54.1%;
        --accent-pro-200: 251 40% 45.1%;
        --accent-pro-900: 250 25.3% 19.4%;
        --accent-secondary-000: 210 71.1% 62%;
        --accent-secondary-100: 210 70.9% 51.6%;
        --accent-secondary-200: 210 70.9% 51.6%;
        --accent-secondary-900: 210 55.9% 24.6%;
        --bg-000: 60 2.1% 18.4%;
        --bg-100: 60 2.7% 14.5%;
        --bg-200: 30 3.3% 11.8%;
        --bg-300: 60 2.6% 7.6%;
        --bg-400: 60 3.4% 5.7%;
        --bg-500: 60 3.4% 5.7%;
        --border-100: 51 16.5% 84.5%;
        --border-200: 51 16.5% 84.5%;
        --border-300: 51 16.5% 84.5%;
        --border-400: 51 16.5% 84.5%;
        --danger-000: 0 73.1% 66.5%;
        --danger-100: 0 58.6% 34.1%;
        --danger-200: 0 58.6% 34.1%;
        --danger-900: 0 23% 15.6%;
        --oncolor-100: 0 0% 100%;
        --oncolor-200: 60 6.7% 97.1%;
        --oncolor-300: 60 6.7% 97.1%;
        --text-000: 48 33.3% 97.1%;
        --text-100: 48 33.3% 97.1%;
        --text-200: 50 9% 73.7%;
        --text-300: 50 9% 73.7%;
        --text-400: 48 4.8% 59.2%;
        --text-500: 48 4.8% 59.2%
    }
}

[data-theme=console],[data-theme=console][data-mode=dark] {
    --accent-brand: 15 63.1% 59.6%;
    --accent-main-000: 18 50.4% 47.5%;
    --accent-main-100: 18 56.8% 43.5%;
    --accent-main-200: 19 58.3% 40.4%;
    --accent-main-900: 16 21.6% 20%;
    --accent-pro-000: 251 40.2% 54.1%;
    --accent-pro-100: 251 40% 45.1%;
    --accent-pro-200: 251 34.2% 33.3%;
    --accent-pro-900: 249 25% 19.4%;
    --accent-secondary-000: 158 68% 32%;
    --accent-secondary-100: 158 80.4% 28%;
    --accent-secondary-200: 158 79.2% 24.5%;
    --accent-secondary-900: 160 18.1% 16.3%;
    --bg-000: 0 0% 6%;
    --bg-100: 0 0% 10%;
    --bg-200: 0 0% 14%;
    --bg-300: 0 0% 17%;
    --bg-400: 0 0% 19%;
    --bg-500: 0 0% 23%;
    --border-100: 51 16.5% 84.5%;
    --border-200: 51 16.5% 84.5%;
    --border-300: 51 16.5% 84.5%;
    --border-400: 51 16.5% 84.5%;
    --danger-000: 4 90.4% 79.5%;
    --danger-100: 5 91.7% 72.5%;
    --danger-200: 5 58.4% 33.9%;
    --danger-900: 0 48.2% 16.5%;
    --oncolor-100: 0 0% 100%;
    --oncolor-200: 60 6.7% 97.1%;
    --oncolor-300: 60 6.7% 97.1%;
    --text-000: 0 0% 100%;
    --text-100: 60 3.7% 94.7%;
    --text-200: 60 1.5% 86.9%;
    --text-300: 30 1.4% 71.8%;
    --text-400: 50 0.8% 65.1%;
    --text-500: 45 0.6% 48%
}

/* Custom component styles */
@layer components {
  .btn-primary {
    @apply px-3 py-1.5 bg-[hsl(var(--accent-main-100))] hover:bg-[hsl(var(--accent-main-000))] rounded-md text-white font-medium text-sm;
  }
  
  .btn-secondary {
    @apply px-3 py-1.5 bg-[hsl(var(--bg-200))] hover:bg-[hsl(var(--bg-300))] rounded-md text-[hsl(var(--text-100))] font-medium text-sm;
  }
  
  .btn-danger {
    @apply px-2 py-0.5 text-xs bg-[hsl(var(--danger-100))] hover:bg-[hsl(var(--danger-000))] rounded-md text-white;
  }
  
  .input-field {
    @apply w-full p-1.5 bg-[hsl(var(--bg-200))] border border-[hsl(var(--border-100))] rounded-md text-[hsl(var(--text-100))] text-sm focus:outline-none focus:ring-1 focus:ring-[hsl(var(--accent-main-100))] focus:border-[hsl(var(--accent-main-100))];
  }
  
  .panel {
    @apply p-2 bg-[hsl(var(--bg-200))] border border-[hsl(var(--border-100))] rounded-lg;
  }
  
  .status-bar {
    @apply p-2 mb-2 bg-[hsl(var(--bg-100))] border-l-4 border-[hsl(var(--accent-main-100))] rounded text-xs;
  }
}
