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

@layer base {
  :root {
    /* Light theme colors */
    --color-primary-50: 239 246 255;
    --color-primary-100: 219 234 254;
    --color-primary-200: 191 219 254;
    --color-primary-300: 147 197 253;
    --color-primary-400: 96 165 250;
    --color-primary-500: 59 130 246;
    --color-primary-600: 37 99 235;
    --color-primary-700: 29 78 216;
    --color-primary-800: 30 64 175;
    --color-primary-900: 30 58 138;

    --color-surface: 255 255 255;
    --color-surface-hover: 248 250 252;
    --color-surface-border: 226 232 240;

    --color-text-primary: 15 23 42;
    --color-text-secondary: 71 85 105;
    --color-text-muted: 148 163 184;
    --color-text-inverse: 255 255 255;

    --color-accent-500: 14 165 233;
    --color-accent-600: 2 132 199;

    --color-success: 34 197 94;
    --color-warning: 234 179 8;
    --color-error: 239 68 68;
  }

  .dark {
    --color-primary-50: 30 58 138;
    --color-primary-100: 30 64 175;
    --color-primary-200: 29 78 216;
    --color-primary-300: 37 99 235;
    --color-primary-400: 59 130 246;
    --color-primary-500: 96 165 250;
    --color-primary-600: 147 197 253;
    --color-primary-700: 191 219 254;
    --color-primary-800: 219 234 254;
    --color-primary-900: 239 246 255;

    --color-surface: 15 23 42;
    --color-surface-hover: 30 41 59;
    --color-surface-border: 51 65 85;

    --color-text-primary: 248 250 252;
    --color-text-secondary: 203 213 225;
    --color-text-muted: 148 163 184;
    --color-text-inverse: 15 23 42;

    --color-accent-500: 56 189 248;
    --color-accent-600: 14 165 233;

    --color-success: 74 222 128;
    --color-warning: 250 204 21;
    --color-error: 248 113 113;
  }

  * {
    @apply border-surface-border;
  }

  html {
    @apply scroll-smooth;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  }

  body {
    @apply bg-surface text-text-primary antialiased;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  ::selection {
    @apply bg-primary-500/30 text-text-primary;
  }

  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-text-muted/30 rounded-full hover:bg-text-muted/50 transition-colors;
  }

  ::-webkit-scrollbar-corner {
    @apply bg-transparent;
  }

  /* Focus visible */
  :focus-visible {
    @apply outline-none ring-2 ring-primary-500 ring-offset-2 ring-offset-surface;
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer components {
  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl font-medium text-sm transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-primary {
    @apply btn bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 shadow-sm hover:shadow-md;
  }

  .btn-secondary {
    @apply btn bg-surface-hover text-text-primary border border-surface-border hover:bg-surface-border active:bg-surface-border/50;
  }

  .btn-ghost {
    @apply btn bg-transparent text-text-secondary hover:bg-surface-hover hover:text-text-primary active:bg-surface-border;
  }

  .btn-danger {
    @apply btn bg-error/10 text-error hover:bg-error/20 active:bg-error/30;
  }

  .btn-icon {
    @apply btn p-2.5;
  }

  .btn-sm {
    @apply px-3 py-1.5 text-xs gap-1.5;
  }

  .btn-lg {
    @apply px-6 py-3 text-base gap-2;
  }

  /* Cards */
  .card {
    @apply bg-surface border border-surface-border rounded-2xl overflow-hidden transition-all duration-300 hover:shadow-lg hover:border-primary-500/20;
  }

  .card-hover {
    @apply card hover:-translate-y-1;
  }

  .card-interactive {
    @apply card-hover cursor-pointer;
  }

  /* Inputs */
  .input {
    @apply w-full px-4 py-2.5 rounded-xl bg-surface border border-surface-border text-text-primary placeholder:text-text-muted transition-all duration-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .input-error {
    @apply border-error focus:border-error focus:ring-error/20;
  }

  .label {
    @apply block text-sm font-medium text-text-secondary mb-1.5;
  }

  .textarea {
    @apply input min-h-[120px] resize-y;
  }

  .select {
    @apply input appearance-none bg-no-repeat bg-right pr-10;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 0.75rem center;
  }

  /* Badges */
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }

  .badge-primary {
    @apply badge bg-primary-100 text-primary-700 dark:bg-primary-900/30 dark:text-primary-300;
  }

  .badge-success {
    @apply badge bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300;
  }

  .badge-warning {
    @apply badge bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300;
  }

  .badge-error {
    @apply badge bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300;
  }

  .badge-neutral {
    @apply badge bg-surface-border text-text-secondary;
  }

  /* Layout */
  .container {
    @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
  }

  .section {
    @apply py-16 sm:py-24 lg:py-32;
  }

  .section-sm {
    @apply py-10 sm:py-16;
  }

  /* Typography */
  .heading-1 {
    @apply text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-text-primary;
  }

  .heading-2 {
    @apply text-3xl sm:text-4xl font-bold tracking-tight text-text-primary;
  }

  .heading-3 {
    @apply text-2xl sm:text-3xl font-semibold tracking-tight text-text-primary;
  }

  .heading-4 {
    @apply text-xl sm:text-2xl font-semibold tracking-tight text-text-primary;
  }

  .text-body {
    @apply text-base text-text-secondary leading-relaxed;
  }

  .text-body-lg {
    @apply text-lg text-text-secondary leading-relaxed;
  }

  .text-sm {
    @apply text-sm text-text-muted;
  }

  .text-xs {
    @apply text-xs text-text-muted;
  }

  .link {
    @apply text-primary-600 hover:text-primary-700 underline-offset-2 hover:underline transition-colors;
  }

  /* Animations */
  .animate-fade-in {
    animation: fadeIn 0.3s ease-out;
  }

  .animate-slide-up {
    animation: slideUp 0.4s ease-out;
  }

  .animate-slide-down {
    animation: slideDown 0.3s ease-out;
  }

  .animate-scale-in {
    animation: scaleIn 0.2s ease-out;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes slideUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-16px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }

  /* Stagger animations */
  .stagger-1 { animation-delay: 50ms; }
  .stagger-2 { animation-delay: 100ms; }
  .stagger-3 { animation-delay: 150ms; }
  .stagger-4 { animation-delay: 200ms; }
  .stagger-5 { animation-delay: 250ms; }
  .stagger-6 { animation-delay: 300ms; }

  /* Glass morphism */
  .glass {
    @apply bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl border border-white/20 dark:border-slate-700/50;
  }

  .glass-strong {
    @apply bg-white/80 dark:bg-slate-900/80 backdrop-blur-2xl border border-white/30 dark:border-slate-700/50;
  }

  /* Gradient text */
  .gradient-text {
    @apply bg-gradient-to-r from-primary-600 via-primary-500 to-accent-500 bg-clip-text text-transparent;
  }

  /* Divider */
  .divider {
    @apply h-px bg-surface-border border-none my-6;
  }

  .divider-vertical {
    @apply w-px h-full bg-surface-border border-none mx-6;
  }

  /* Tooltip */
  .tooltip {
    @apply relative inline-block;
  }

  .tooltip::before {
    @apply absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 text-xs text-white bg-slate-900 rounded opacity-0 invisible transition-all duration-200 whitespace-nowrap;
    content: attr(data-tooltip);
  }

  .tooltip:hover::before {
    @apply opacity-100 visible translate-y-0;
  }

  /* Loading skeleton */
  .skeleton {
    @apply animate-pulse bg-surface-border rounded;
  }

  .skeleton-text {
    @apply skeleton h-4 w-full;
  }

  .skeleton-title {
    @apply skeleton h-6 w-3/4;
  }

  .skeleton-avatar {
    @apply skeleton rounded-full;
  }

  .skeleton-card {
    @apply skeleton rounded-2xl;
  }

  /* Article content */
  .prose {
    @apply text-text-secondary leading-relaxed;
  }

  .prose h1 { @apply text-3xl font-bold text-text-primary mt-10 mb-4 pb-2 border-b border-surface-border; }
  .prose h2 { @apply text-2xl font-bold text-text-primary mt-10 mb-4; }
  .prose h3 { @apply text-xl font-semibold text-text-primary mt-8 mb-3; }
  .prose h4 { @apply text-lg font-semibold text-text-primary mt-6 mb-2; }
  .prose p { @apply mb-6 leading-relaxed; }
  .prose a { @apply text-primary-600 hover:text-primary-700 underline-offset-2 hover:underline; }
  .prose strong { @apply font-semibold text-text-primary; }
  .prose em { @apply italic; }
  .prose code { @apply px-1.5 py-0.5 bg-surface-border rounded text-sm font-mono text-primary-600; }
  .prose pre { @apply bg-slate-900 rounded-xl p-4 overflow-x-auto my-6; }
  .prose pre code { @apply bg-transparent p-0 text-slate-100; }
  .prose ul { @apply list-disc list-inside mb-6 space-y-2; }
  .prose ol { @apply list-decimal list-inside mb-6 space-y-2; }
  .prose li { @apply leading-relaxed; }
  .prose blockquote { @apply border-l-4 border-primary-500 pl-4 italic text-text-muted my-6; }
  .prose img { @apply rounded-xl my-6 max-w-full h-auto; }
  .prose video { @apply rounded-xl my-6 max-w-full; }
  .prose audio { @apply w-full my-4; }
  .prose table { @apply w-full border-collapse my-6; }
  .prose th, .prose td { @apply px-4 py-2 border border-surface-border text-left; }
  .prose th { @apply bg-surface-hover font-semibold; }
  .prose hr { @apply my-8 border-surface-border; }
  .prose kbd { @apply px-2 py-1 bg-surface-border rounded text-sm font-mono; }

  /* Music player */
  .music-player {
    @apply fixed bottom-4 right-4 z-50 glass-strong rounded-2xl shadow-xl border border-white/20 dark:border-slate-700/50 transition-all duration-300;
  }

  .music-player.minimized {
    @apply bottom-4 right-4 w-16 h-16 p-0;
  }

  /* Admin layout */
  .admin-sidebar {
    @apply fixed inset-y-0 left-0 z-40 w-64 bg-surface border-r border-surface-border transform transition-transform duration-300 lg:translate-x-0 -translate-x-full;
  }

  .admin-sidebar.open {
    @apply translate-x-0;
  }

  .admin-header {
    @apply fixed top-0 left-0 right-0 z-30 h-16 bg-surface/80 backdrop-blur-xl border-b border-surface-border lg:left-64;
  }

  .admin-main {
    @apply pt-16 lg:pl-64 min-h-screen transition-all duration-300;
  }

  /* Table */
  .table-container {
    @apply overflow-x-auto rounded-xl border border-surface-border;
  }

  .table {
    @apply w-full text-sm;
  }

  .table th {
    @apply px-4 py-3 text-left font-semibold text-text-secondary bg-surface-hover border-b border-surface-border;
  }

  .table td {
    @apply px-4 py-3 border-b border-surface-border/50;
  }

  .table tr:last-child td {
    @apply border-b-0;
  }

  .table tbody tr {
    @apply transition-colors hover:bg-surface-hover;
  }

  /* Dropdown */
  .dropdown {
    @apply absolute right-0 top-full mt-2 w-48 bg-surface border border-surface-border rounded-xl shadow-lg py-1 opacity-0 invisible transform translate-y-2 transition-all duration-200 z-50;
  }

  .dropdown.open {
    @apply opacity-100 visible translate-y-0;
  }

  .dropdown-item {
    @apply flex items-center gap-2 px-4 py-2 text-sm text-text-secondary hover:bg-surface-hover hover:text-text-primary transition-colors;
  }

  .dropdown-divider {
    @apply h-px bg-surface-border my-1;
  }

  /* Modal */
  .modal-overlay {
    @apply fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4;
  }

  .modal {
    @apply bg-surface rounded-2xl shadow-xl max-h-[90vh] overflow-hidden w-full max-w-2xl transform transition-all;
  }

  .modal-lg {
    @apply max-w-4xl;
  }

  .modal-xl {
    @apply max-w-6xl;
  }

  /* Toast */
  .toast {
    @apply fixed bottom-4 right-4 z-50 flex items-center gap-3 px-4 py-3 bg-surface border border-surface-border rounded-xl shadow-xl transform transition-all duration-300;
  }

  .toast.success {
    @apply border-green-500/50 bg-green-500/10;
  }

  .toast.error {
    @apply border-red-500/50 bg-red-500/10;
  }

  .toast.warning {
    @apply border-yellow-500/50 bg-yellow-500/10;
  }

  .toast.info {
    @apply border-primary-500/50 bg-primary-500/10;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  .text-pretty {
    text-wrap: pretty;
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .gradient-border {
    @apply relative;
    background: linear-gradient(to right, var(--color-surface), var(--color-surface)) padding-box,
      linear-gradient(to right, rgb(var(--color-primary-500)), rgb(var(--color-accent-500))) border-box;
    border: 1px solid transparent;
  }

  @keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }

  .shimmer {
    @apply relative overflow-hidden;
    background: linear-gradient(
      90deg,
      rgb(var(--color-surface-border)) 25%,
      rgb(var(--color-surface-hover)) 50%,
      rgb(var(--color-surface-border)) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }

  .dark .shimmer {
    background: linear-gradient(
      90deg,
      rgb(var(--color-surface-border)) 25%,
      rgb(var(--color-surface-hover)) 50%,
      rgb(var(--color-surface-border)) 75%
    );
  }
}