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

@layer base {
  /* Base element styles */
  body {
    @apply bg-beige-50 text-warm-gray-900 font-body text-base leading-relaxed;
    background-image: linear-gradient(180deg, #fffdf9 0%, #fafaf7 38%, #f5f5f0 100%);
  }

  /* Typography styles */
  h1, h2, h3, h4, h5, h6 {
    @apply font-heading font-semibold text-warm-gray-900;
    line-height: 1.2;
  }

  h1 {
    @apply text-5xl font-bold;
    line-height: 1.1;
  }

  h2 {
    @apply text-4xl;
  }

  h3 {
    @apply text-2xl;
  }
}

@layer components {
  /* Marketing-only button styles — scoped to NOT conflict with DaisyUI .btn modifiers */
  .btn-primary:not(.btn) {
    @apply bg-purple-600 text-white px-6 py-3 rounded-button font-medium transition-all duration-200;
    font-size: 0.9375rem;
    box-shadow: 0 2px 4px rgba(124, 58, 237, 0.1);
  }

  .btn-primary:not(.btn):hover {
    @apply bg-purple-700 -translate-y-px;
    box-shadow: 0 4px 8px rgba(124, 58, 237, 0.2);
  }

  .btn-accent:not(.btn) {
    @apply bg-terracotta-500 text-white px-6 py-3 rounded-button font-medium transition-all duration-200;
    font-size: 0.9375rem;
    box-shadow: 0 2px 4px rgba(224, 120, 86, 0.1);
  }

  .btn-accent:not(.btn):hover {
    @apply bg-terracotta-600 -translate-y-px;
    box-shadow: 0 4px 8px rgba(224, 120, 86, 0.2);
  }

  .btn-secondary:not(.btn) {
    @apply bg-beige-100 text-warm-gray-900 px-6 py-3 rounded-button border border-purple-600 font-medium transition-all duration-200;
    font-size: 0.9375rem;
  }

  .btn-secondary:not(.btn):hover {
    @apply bg-purple-50 border-purple-700;
  }

  /* Card Styles */
  .card-warm {
    @apply bg-white rounded-card border border-beige-200 p-6 transition-shadow duration-200;
    box-shadow: 0 2px 8px rgba(64, 64, 64, 0.06);
  }

  .card-warm:hover {
    box-shadow: 0 4px 16px rgba(64, 64, 64, 0.1);
  }

  .marketing-nav-link {
    @apply text-sm font-medium text-warm-gray-700 transition-colors duration-200;
  }

  .marketing-nav-link:hover {
    @apply text-purple-700;
  }

  .section-kicker {
    @apply inline-flex items-center gap-2 rounded-full border border-purple-200 bg-white px-4 py-2 text-xs font-semibold uppercase text-purple-700;
    letter-spacing: 0.22em;
  }

  .marketing-panel {
    @apply rounded-card border border-beige-200 bg-white;
    box-shadow: 0 20px 50px rgba(40, 30, 18, 0.08);
  }

  .marketing-panel-muted {
    @apply rounded-card border border-purple-200;
    background: linear-gradient(180deg, rgba(250, 245, 255, 0.92) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow: 0 16px 36px rgba(82, 53, 140, 0.12);
  }

  .hero-surface {
    @apply rounded-[28px] p-6 md:p-8;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 28px 60px rgba(52, 22, 92, 0.24);
    backdrop-filter: blur(14px);
  }

  .hero-stat {
    @apply rounded-card border p-5;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
  }

  .feature-tile {
    @apply rounded-card border border-beige-200 bg-white p-6 transition-all duration-200;
    box-shadow: 0 14px 30px rgba(40, 30, 18, 0.06);
  }

  .feature-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(40, 30, 18, 0.09);
  }

  .process-step {
    @apply rounded-card border border-beige-200 bg-white p-5;
    box-shadow: 0 12px 28px rgba(40, 30, 18, 0.06);
  }

  .pricing-card {
    @apply relative flex h-full flex-col rounded-card border border-beige-200 bg-white p-8;
    box-shadow: 0 18px 40px rgba(40, 30, 18, 0.07);
  }

  .pricing-card-highlight {
    @apply border-2 border-purple-600;
    box-shadow: 0 24px 54px rgba(91, 54, 166, 0.16);
  }

  .faq-card {
    @apply rounded-card border border-beige-200 bg-white p-6;
    box-shadow: 0 12px 30px rgba(40, 30, 18, 0.05);
  }

  .marketing-page-hero {
    @apply relative overflow-hidden py-16 md:py-20;
    background: linear-gradient(135deg, #7c3aed 0%, #8f67eb 56%, #df8b6a 100%);
  }

  .marketing-page-shell {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  .marketing-page-intro {
    @apply mx-auto max-w-3xl text-center;
  }

  .marketing-story-card {
    @apply rounded-[28px] border border-beige-200 bg-white p-8 md:p-10;
    box-shadow: 0 18px 46px rgba(40, 30, 18, 0.07);
  }

  .marketing-story-card-muted {
    @apply rounded-[28px] border border-purple-200 p-8 md:p-10;
    background: linear-gradient(180deg, rgba(250, 245, 255, 0.92) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow: 0 18px 42px rgba(82, 53, 140, 0.11);
  }

  .workspace-shell {
    @apply mx-auto w-full max-w-[1180px];
  }

  .workspace-page {
    @apply mx-auto w-full max-w-[1180px] pb-8 pt-3 md:pb-8 md:pt-4;
  }

  .workspace-screen {
    @apply mx-auto flex h-full w-full max-w-[1180px] flex-col gap-4 px-6 pb-4 pt-3 sm:px-8 md:pb-6 md:pt-4 lg:px-10 xl:px-12;
  }

  .workspace-stack {
    @apply space-y-6;
  }

  .workspace-header {
    @apply mb-6 rounded-[24px] border border-beige-200 bg-white px-5 py-6 md:px-7;
    box-shadow: 0 14px 36px rgba(40, 30, 18, 0.06);
  }

  .workspace-tabs {
    @apply mb-6 rounded-[22px] border border-beige-200 bg-white/90 p-2;
    box-shadow: 0 12px 30px rgba(40, 30, 18, 0.06);
  }

  .workspace-tabs-row {
    @apply flex min-w-max items-center gap-2;
  }

  .workspace-tabs-row-fill {
    @apply w-full;
  }

  .workspace-tab {
    @apply flex items-center gap-2 rounded-2xl px-4 py-2 text-sm font-medium text-warm-gray-600 transition-all duration-200;
  }

  .workspace-tab:hover {
    @apply bg-white text-warm-gray-900;
  }

  .workspace-tab-active {
    @apply bg-white text-warm-gray-900;
    box-shadow: 0 10px 20px rgba(40, 30, 18, 0.08);
  }

  @screen sm {
    .workspace-tabs-row {
      @apply min-w-0 flex-wrap;
    }

    .workspace-tabs-row-fill .workspace-tab {
      @apply flex-1 justify-center;
    }
  }

  .workspace-panel {
    @apply rounded-[24px] border border-beige-200 bg-white p-6 md:p-8;
    box-shadow: 0 16px 38px rgba(40, 30, 18, 0.06);
  }

  .workspace-group {
    @apply rounded-[30px] border border-beige-200/90 p-4 md:p-5;
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.88) 0%, rgba(255, 255, 255, 0.74) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 42px rgba(40, 30, 18, 0.05);
  }

  .workspace-table-panel {
    @apply rounded-[24px] border border-beige-200 bg-white overflow-hidden p-0;
    box-shadow: 0 16px 38px rgba(40, 30, 18, 0.06);
  }

  .workspace-panel-muted {
    @apply rounded-[24px] border border-purple-200 p-6 md:p-8;
    background: linear-gradient(180deg, rgba(250, 245, 255, 0.92) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow: 0 16px 34px rgba(82, 53, 140, 0.1);
  }

  .asset-filter-bar {
    @apply border-b border-beige-200 bg-beige-50/80 px-4 py-3 md:px-5;
  }

  .asset-filter-chip {
    @apply inline-flex items-center gap-2 rounded-full border border-beige-200 bg-white px-3 py-2 text-sm font-medium text-warm-gray-700 transition-colors duration-200;
    box-shadow: 0 6px 18px rgba(40, 30, 18, 0.05);
  }

  .asset-filter-chip:hover {
    @apply border-purple-200 bg-purple-50 text-purple-700;
  }

  .asset-search-input {
    @apply h-10 rounded-full border border-beige-200 bg-white pl-10 pr-4 text-sm text-warm-gray-900 shadow-none;
  }

  .asset-search-input:focus {
    @apply border-purple-400 outline-none ring-2 ring-purple-100;
  }

  .asset-table-header {
    @apply sticky top-0 z-10 border-b border-beige-200 bg-beige-50/95 backdrop-blur;
  }

  .asset-table-row {
    @apply border-b border-beige-100 transition-colors duration-150;
  }

  .asset-table-row:hover {
    background: linear-gradient(90deg, rgba(250, 245, 255, 0.7) 0%, rgba(255, 250, 245, 0.95) 100%);
  }

  .asset-empty-state {
    @apply mx-auto max-w-xl rounded-[28px] border border-beige-200 bg-white px-8 py-10 text-center;
    box-shadow: 0 20px 46px rgba(40, 30, 18, 0.08);
  }

  .asset-empty-icon {
    @apply mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full border border-purple-200 text-purple-700;
    background: linear-gradient(135deg, rgba(250, 245, 255, 1) 0%, rgba(255, 247, 242, 1) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }

  .asset-selection-toolbar {
    @apply rounded-[20px] border border-warm-gray-800/90 px-5 py-3 text-white;
    background: linear-gradient(135deg, rgba(43, 39, 36, 0.96) 0%, rgba(71, 55, 41, 0.96) 100%);
    box-shadow: 0 18px 42px rgba(28, 24, 19, 0.28);
  }

  .asset-control-select {
    @apply h-10 rounded-full border border-beige-200 bg-white px-4 text-sm text-warm-gray-900 shadow-none;
  }

  .asset-control-select:focus {
    @apply border-purple-400 outline-none ring-2 ring-purple-100;
  }

  .asset-status-pill {
    @apply inline-flex items-center justify-center rounded-full border border-beige-200 bg-beige-50 text-warm-gray-700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }

  .asset-modal-panel {
    @apply max-w-md rounded-[28px] border border-beige-200 bg-white;
    box-shadow: 0 24px 54px rgba(40, 30, 18, 0.12);
  }

  .workspace-metric-card {
    @apply rounded-[22px] border border-beige-200 bg-white p-5;
    box-shadow: 0 14px 32px rgba(40, 30, 18, 0.06);
  }

  .workspace-soft-panel {
    @apply rounded-[22px] border border-beige-200 bg-beige-50 p-5;
  }

  .workspace-warning-panel {
    @apply rounded-[22px] border p-5;
    border-color: rgba(224, 120, 86, 0.28);
    background: linear-gradient(180deg, rgba(255, 245, 240, 0.98) 0%, rgba(255, 250, 246, 1) 100%);
    box-shadow: 0 14px 30px rgba(180, 86, 46, 0.08);
  }

  .app-topbar {
    @apply sticky top-0 z-50 border-b border-beige-200/80 bg-white/90 backdrop-blur;
    box-shadow: 0 10px 26px rgba(40, 30, 18, 0.05);
  }

  .app-content-shell {
    @apply mx-auto w-full max-w-[1180px] px-6 sm:px-8 lg:px-10 xl:px-12;
  }

  .app-brand {
    @apply inline-flex items-center gap-3 whitespace-nowrap leading-none text-warm-gray-900 transition-colors duration-200;
  }

  .app-brand:hover {
    @apply text-purple-700;
  }

  .app-nav-link {
    @apply inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium text-warm-gray-600 transition-colors duration-200;
  }

  .app-nav-link:hover {
    @apply bg-purple-50 text-purple-700;
  }

  .workspace-page-intro {
    @apply mb-6;
  }

  .workspace-page-intro p {
    @apply mt-1 text-sm text-warm-gray-600;
  }

  .workspace-title {
    @apply text-3xl font-bold tracking-tight text-warm-gray-900 md:text-[2.35rem];
  }

  .workspace-subtitle {
    @apply mt-2 max-w-3xl text-sm text-warm-gray-600 md:text-base;
  }

  .flash-banner {
    @apply mb-4 flex items-start gap-3 rounded-[20px] border px-5 py-4 text-sm;
    box-shadow: 0 12px 28px rgba(40, 30, 18, 0.06);
  }

  .flash-banner-success {
    @apply border-terracotta-200 bg-terracotta-50 text-warm-gray-900;
  }

  .flash-banner-error {
    @apply border-red-200 bg-red-50 text-warm-gray-900;
  }

  .flash-banner-warning {
    @apply border-amber-200 bg-amber-50 text-warm-gray-900;
  }

  .flash-banner-info {
    @apply border-purple-200 bg-purple-50 text-warm-gray-900;
  }

  .section-label {
    @apply text-xs font-semibold uppercase tracking-[0.18em] text-warm-gray-500;
  }

  .soft-badge {
    @apply inline-flex items-center gap-2 rounded-full border border-beige-200 bg-beige-50 px-3 py-1.5 text-xs font-medium text-warm-gray-700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  }

  .package-stack-item {
    @apply rounded-[22px] border border-beige-200 bg-white p-5;
    box-shadow: 0 12px 28px rgba(40, 30, 18, 0.06);
  }

  .package-stack-item-muted {
    @apply rounded-[22px] border border-beige-200 bg-beige-50 p-4;
  }

  .timeline-surface {
    @apply rounded-[22px] border border-beige-200 bg-beige-50 p-4;
  }

  .library-project-card {
    @apply rounded-[24px] border border-beige-200 bg-white p-6 transition-all duration-200;
    box-shadow: 0 16px 38px rgba(40, 30, 18, 0.06);
  }

  .library-project-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 44px rgba(40, 30, 18, 0.08);
  }

  .public-hero-panel {
    @apply rounded-[28px] border border-purple-200 p-8 md:p-10;
    background: linear-gradient(180deg, rgba(250, 245, 255, 0.94) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow: 0 20px 46px rgba(82, 53, 140, 0.12);
  }

  .public-action-panel {
    @apply rounded-[24px] border border-beige-200 bg-white p-6;
    box-shadow: 0 16px 36px rgba(40, 30, 18, 0.07);
  }

  /* Flash Message Styles */
  .flash-notice {
    @apply bg-purple-50 text-warm-gray-900 p-4 px-6 rounded-button mb-6 flex items-center gap-3;
    border-left: 4px solid #7c3aed;
  }

  .flash-alert {
    @apply bg-red-50 text-warm-gray-900 p-4 px-6 rounded-button mb-6 flex items-center gap-3;
    border-left: 4px solid #dc2626;
  }

  .flash-success {
    @apply text-warm-gray-900 p-4 px-6 rounded-button mb-6 flex items-center gap-3;
    background-color: #fef6f0;
    border-left: 4px solid #e07856;
  }

  /* Drag and drop states */
  .drop-placeholder td {
    @apply h-1 bg-blue-500;
  }

  /* Multi-select drag visual indicator */
  .selected-for-drag {
    @apply ring-2 ring-blue-500 ring-offset-2;
  }
}

@layer utilities {
  /* During drag operations, ensure folder drop targets remain interactive */
  body.is-dragging [data-controller="folder-item"] {
    pointer-events: auto;
  }
}