/* ===========================================
   HAKAWA - Styles principaux
   Thème "Mille et Une Nuits"
   =========================================== */

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

/* ===========================================
   Variables CSS
   =========================================== */
:root {
  /* Couleurs principales */
  --night: #0F1B2E;
  --night-light: #1E3A5F;
  --night-dark: #0A1220;
  --gold: #D4A853;
  --gold-light: #E8C97D;
  --gold-dark: #B87333;
  --sand: #E8DCC4;
  --sand-light: #F5F0E6;
  --sand-dark: #D4C4A8;
  --parchment: #FFFEF9;
  
  /* Ombres */
  --shadow-glow: 0 0 30px rgba(212, 168, 83, 0.3);
  --shadow-glow-strong: 0 0 50px rgba(212, 168, 83, 0.5);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;
}

/* ===========================================
   Base Styles
   =========================================== */
@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply bg-night text-sand antialiased;
    font-family: 'Inter', sans-serif;
  }
  
  /* Typographie */
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Cinzel Decorative', serif;
  }
  
  .font-display {
    font-family: 'Cinzel Decorative', serif;
  }
  
  .font-serif {
    font-family: 'Lora', serif;
  }
  
  /* Scrollbar personnalisée */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background: var(--night-dark);
  }
  
  ::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 4px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: var(--gold-light);
  }
  
  /* Sélection */
  ::selection {
    background: rgba(212, 168, 83, 0.3);
    color: var(--parchment);
  }
}

/* ===========================================
   Components
   =========================================== */
@layer components {
  /* Boutons */
  .btn {
    @apply inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl font-semibold transition-all duration-300;
  }
  
  .btn-gold {
    @apply bg-gold text-night hover:bg-gold-light;
    box-shadow: var(--shadow-glow);
  }
  
  .btn-gold:hover {
    box-shadow: var(--shadow-glow-strong);
  }
  
  .btn-outline {
    @apply border-2 border-gold text-gold hover:bg-gold/10;
  }
  
  .btn-ghost {
    @apply text-gold hover:bg-gold/10;
  }
  
  /* Cards */
  .card {
    @apply bg-night-light/50 rounded-2xl border border-gold/20 p-6;
  }
  
  .card-hover {
    @apply hover:border-gold/50 hover:shadow-glow transition-all duration-300;
  }
  
  /* Inputs */
  .input {
    @apply w-full bg-night border border-gold/20 rounded-xl px-4 py-3 text-parchment placeholder-sand/30 focus:border-gold/50 focus:outline-none transition-colors;
  }
  
  .input-icon {
    @apply pl-12;
  }
  
  /* Labels */
  .label {
    @apply block text-sm text-sand mb-2;
  }
  
  /* Badges */
  .badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
  }
  
  .badge-gold {
    @apply bg-gold/20 text-gold border border-gold/30;
  }
  
  .badge-success {
    @apply bg-green-500/20 text-green-400 border border-green-500/30;
  }
  
  .badge-warning {
    @apply bg-yellow-500/20 text-yellow-400 border border-yellow-500/30;
  }
  
  .badge-error {
    @apply bg-red-500/20 text-red-400 border border-red-500/30;
  }
  
  /* Shadow glow */
  .shadow-glow {
    box-shadow: var(--shadow-glow);
  }
  
  .shadow-glow-strong {
    box-shadow: var(--shadow-glow-strong);
  }
  
  /* Gradient backgrounds */
  .bg-gradient-night {
    @apply bg-gradient-to-b from-night-dark via-night to-night-light;
  }
  
  .bg-gradient-gold {
    @apply bg-gradient-to-r from-gold/20 to-gold/10;
  }
  
  /* Decorative star */
  .star {
    @apply text-gold;
  }
  
  .star::before {
    content: '✦';
  }
  
  /* Text truncate multi-line */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ===========================================
   Utilities
   =========================================== */
@layer utilities {
  /* Animation float */
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
  
  @keyframes float {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }
  
  /* Animation shimmer */
  .animate-shimmer {
    animation: shimmer 2s linear infinite;
    background: linear-gradient(
      90deg,
      var(--gold) 0%,
      var(--gold-light) 50%,
      var(--gold) 100%
    );
    background-size: 200% 100%;
  }
  
  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }
  
  /* Animation pulse glow */
  .animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
  }
  
  @keyframes pulse-glow {
    0%, 100% {
      box-shadow: 0 0 20px rgba(212, 168, 83, 0.3);
    }
    50% {
      box-shadow: 0 0 40px rgba(212, 168, 83, 0.6);
    }
  }
  
  /* Fade in */
  .animate-fade-in {
    animation: fadeIn 0.5s ease-out;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Slide in */
  .animate-slide-in-left {
    animation: slideInLeft 0.5s ease-out;
  }
  
  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  .animate-slide-in-right {
    animation: slideInRight 0.5s ease-out;
  }
  
  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

/* ===========================================
   RTL Support (Arabic)
   =========================================== */
[dir="rtl"] {
  /* Flip icons */
  .fa-arrow-right::before {
    content: "\f060"; /* arrow-left */
  }
  
  .fa-arrow-left::before {
    content: "\f061"; /* arrow-right */
  }
  
  /* Reverse flex items */
  .rtl\:flex-row-reverse {
    flex-direction: row-reverse;
  }
  
  /* Text alignment */
  .rtl\:text-right {
    text-align: right;
  }
  
  /* Margins and paddings */
  .rtl\:mr-auto {
    margin-right: auto;
    margin-left: 0;
  }
  
  .rtl\:ml-auto {
    margin-left: auto;
    margin-right: 0;
  }
}

/* ===========================================
   Print Styles
   =========================================== */
@media print {
  .no-print {
    display: none !important;
  }
  
  body {
    background: white;
    color: black;
  }
  
  .card {
    border: 1px solid #ccc;
    box-shadow: none;
  }
}

/* ===========================================
   Editor Styles
   =========================================== */
.editor-content {
  min-height: 400px;
  line-height: 1.8;
}

.editor-content:focus {
  outline: none;
}

.editor-content:empty::before {
  content: attr(data-placeholder);
  color: rgba(232, 220, 196, 0.3);
  pointer-events: none;
}

.editor-content h2 {
  @apply text-2xl font-display text-gold mb-4 mt-8;
}

.editor-content blockquote {
  @apply border-l-4 border-gold/50 pl-4 italic text-sand/80 my-6;
}

.editor-content p {
  @apply mb-4;
}

.editor-content strong {
  @apply font-bold text-parchment;
}

.editor-content em {
  @apply italic;
}

.editor-content u {
  @apply underline decoration-gold/50;
}

/* ===========================================
   Prose Styles (for content)
   =========================================== */
.prose-hakawa {
  @apply text-sand leading-relaxed;
}

.prose-hakawa h1 {
  @apply text-3xl font-display text-gold mb-6;
}

.prose-hakawa h2 {
  @apply text-2xl font-display text-gold mb-4 mt-8;
}

.prose-hakawa h3 {
  @apply text-xl font-display text-gold mb-3 mt-6;
}

.prose-hakawa p {
  @apply mb-4;
}

.prose-hakawa a {
  @apply text-gold hover:text-gold-light underline;
}

.prose-hakawa ul {
  @apply list-disc list-inside mb-4 space-y-2;
}

.prose-hakawa ol {
  @apply list-decimal list-inside mb-4 space-y-2;
}

.prose-hakawa blockquote {
  @apply border-l-4 border-gold/50 pl-4 italic text-sand/80 my-6;
}

.prose-hakawa code {
  @apply bg-night-light/50 px-2 py-1 rounded text-gold-light font-mono text-sm;
}

.prose-hakawa pre {
  @apply bg-night-light/50 p-4 rounded-xl overflow-x-auto my-6;
}

.prose-hakawa pre code {
  @apply bg-transparent p-0;
}

.prose-hakawa img {
  @apply rounded-xl my-6;
}

.prose-hakawa hr {
  @apply border-gold/20 my-8;
}