/* Font loaded via HTML preload for performance - see index.html */

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

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 215 25% 27%;

    --card: 0 0% 100%;
    --card-foreground: 215 25% 27%;

    --popover: 0 0% 100%;
    --popover-foreground: 215 25% 27%;

    /* Magenta - Primary brand color for "Facture" */
    --primary: 334 86% 42%;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 334 86% 47%; /* +10% luminosité */

    /* Bleu nuit - Brand color for "Devis.fr" */
    --brand-dark: 224 43% 19%;
    --brand-dark-foreground: 0 0% 100%;
    --brand-dark-hover: 224 43% 29%; /* +10% luminosité */

    /* Couleurs secondaires selon charte */
    --secondary: 240 9% 96%; /* Gris clair #F5F5F7 */
    --secondary-foreground: 0 0% 29%; /* Gris foncé #4A4A4A */
    
    /* Gris spécifiques de la charte */
    --gray-light: 240 9% 96%; /* #F5F5F7 */
    --gray-dark: 0 0% 29%; /* #4A4A4A */

    --muted: 240 9% 96%; /* Gris clair */
    --muted-foreground: 0 0% 29%; /* Gris foncé */

    /* Navy Blue - Accent color for success/validation */
    --accent: 224 43% 35%;
    --accent-foreground: 0 0% 100%;
    --accent-hover: 224 43% 30%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 334 86% 42%; /* Utilise la couleur magenta principale au lieu du bleu */

    --radius: 0.75rem;

    /* Design system additions for beautiful effects */
    --primary-glow: 334 86% 52%;
    --brand-dark-glow: 224 43% 29%;
    --accent-glow: 224 43% 45%;
    --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-glow)));
    --gradient-brand-dark: linear-gradient(135deg, hsl(var(--brand-dark)), hsl(var(--brand-dark-glow)));
    --gradient-accent: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent-glow)));
    --shadow-elegant: 0 10px 30px -10px hsl(var(--primary) / 0.2);
    --shadow-glow: 0 0 40px hsl(var(--primary-glow) / 0.3);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Document generator specific colors */
    --document-company: 334 86% 42%; /* Magenta pour entreprise */
    --document-company-foreground: 0 0% 100%;
    --document-company-bg: 334 86% 95%;
    --document-client: 224 43% 35%; /* Bleu marine pour client */ 
    --document-client-foreground: 0 0% 100%;
    --document-client-bg: 224 43% 95%;
    --document-optional: 220 14% 94%; /* Gris clair */
    --document-table-alt: 220 14% 98%;

    /* Document generator header - Version allégée et élégante */
    --header-light-start: 347 100% 96%; /* Rose pâle #FDE6EF */
    --header-light-end: 334 77% 77%; /* Magenta clair #F48FB1 */
    --header-accent: 334 86% 42%; /* Magenta pour accents #C70F5A */
    --header-text-primary: 224 43% 19%; /* Bleu nuit #1C2746 */
    --header-text-secondary: 334 86% 35%; /* Magenta foncé */
    --header-border: 334 50% 85%; /* Bordure douce */
    --header-shadow: 334 30% 50%; /* Ombre douce */
    --invoice-vat-foreground: 0 0% 100%;
    --invoice-no-vat: 334 86% 47%; /* Magenta plus clair pour auto-entrepreneur */
    --invoice-no-vat-foreground: 0 0% 100%;
    --quote: 224 43% 19%; /* Bleu nuit pour devis */
    --quote-foreground: 0 0% 100%;
    --receipt: 45 93% 47%; /* Jaune/or pour reçu */
    --receipt-foreground: 0 0% 100%;
    --rent-receipt: 195 100% 45%; /* Cyan/bleu pour quittance */
    --rent-receipt-foreground: 0 0% 100%;
    --credit-note: 14 100% 57%; /* Rouge/orange pour avoir */
    --credit-note-foreground: 0 0% 100%;

    /* Invoice VAT manquant en mode clair */
    --invoice-vat: 334 86% 42%; /* Magenta pour facture avec TVA */

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5.3% 26.1%;

    --sidebar-primary: 240 5.9% 10%;

    --sidebar-primary-foreground: 0 0% 98%;

    --sidebar-accent: 240 4.8% 95.9%;

    --sidebar-accent-foreground: 240 5.9% 10%;

    --sidebar-border: 220 13% 91%;

    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 215 28% 7%;
    --foreground: 0 0% 95%;

    --card: 215 28% 9%;
    --card-foreground: 0 0% 95%;

    --popover: 215 28% 9%;
    --popover-foreground: 0 0% 95%;

    --primary: 334 86% 47%;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 334 86% 42%;

    --brand-dark: 224 43% 24%;
    --brand-dark-foreground: 0 0% 100%;
    --brand-dark-hover: 224 43% 29%;

    --secondary: 215 28% 15%;
    --secondary-foreground: 0 0% 95%;

    --muted: 215 28% 15%;
    --muted-foreground: 220 9% 65%;

    --accent: 224 43% 40%;
    --accent-foreground: 0 0% 100%;
    --accent-hover: 224 43% 45%;

    --destructive: 0 84% 65%;
    --destructive-foreground: 0 0% 100%;

    --border: 215 28% 20%;
    --input: 215 28% 20%;
    --ring: 334 86% 47%; /* Utilise la couleur magenta principale en mode sombre */
    
    /* Dark mode design system additions */
    --primary-glow: 334 86% 57%;
    --brand-dark-glow: 224 43% 34%;
    --accent-glow: 224 43% 50%;
    --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-glow)));
    --gradient-brand-dark: linear-gradient(135deg, hsl(var(--brand-dark)), hsl(var(--brand-dark-glow)));
    --gradient-accent: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent-glow)));
    --shadow-elegant: 0 10px 30px -10px hsl(var(--primary) / 0.3);
    --shadow-glow: 0 0 40px hsl(var(--primary-glow) / 0.4);

    /* Document generator dark mode colors */
    --document-company: 334 86% 47%;
    --document-company-foreground: 0 0% 100%;
    --document-company-bg: 334 30% 15%;
    --document-client: 224 43% 40%;
    --document-client-foreground: 0 0% 100%;
    --document-client-bg: 224 30% 15%;
    --document-optional: 220 14% 15%;
    --document-table-alt: 220 14% 12%;

    /* Document type specific colors dark mode */
    --invoice-vat: 334 86% 47%;
    --invoice-vat-foreground: 0 0% 100%;
    --invoice-no-vat: 334 86% 52%;
    --invoice-no-vat-foreground: 0 0% 100%;
    --quote: 224 43% 24%;
    --quote-foreground: 0 0% 100%;
    --receipt: 45 93% 52%;
    --receipt-foreground: 0 0% 100%;
    --rent-receipt: 195 100% 50%;
    --rent-receipt-foreground: 0 0% 100%;
    --credit-note: 14 100% 62%;
    --credit-note-foreground: 0 0% 100%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-family: 'Montserrat', 'MontserratFallback', 'Arial', 'Helvetica', sans-serif;
    /* Optimisations tactiles pour mobile */
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    min-height: 100vh;
  }

  /* Optimisation des éléments interactifs pour mobile */
  input, textarea, select, button, [role="button"], a {
    touch-action: manipulation;
  }

  /* Permettre la sélection de texte dans les inputs et contenus */
  input, textarea, [contenteditable] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
  }
}

/* Styles pour les articles en prose */
.prose {
  @apply text-foreground max-w-none;
}

.prose h2 {
  @apply text-xl md:text-2xl font-bold mt-8 md:mt-12 mb-4 md:mb-6 text-foreground border-b border-border pb-2;
}

.prose h3 {
  @apply text-lg md:text-xl font-semibold mt-6 md:mt-8 mb-3 md:mb-4 text-foreground;
}

.prose h4 {
  @apply text-base md:text-lg font-medium mt-4 md:mt-6 mb-2 md:mb-3 text-foreground;
}

.prose p {
  @apply mb-3 md:mb-4 text-muted-foreground leading-relaxed text-sm md:text-base;
}

.prose ul {
  @apply mb-3 md:mb-4 space-y-1 md:space-y-2;
}

.prose li {
  @apply text-muted-foreground text-sm md:text-base;
}

.prose strong {
  @apply font-semibold text-foreground;
}

.prose code {
  @apply bg-muted px-1 md:px-2 py-0.5 md:py-1 rounded text-xs md:text-sm font-mono;
}

.prose blockquote {
  @apply border-l-4 border-l-primary pl-3 md:pl-4 italic text-muted-foreground text-sm md:text-base;
}

/* Styles responsifs globaux */
@media (max-width: 768px) {
  .container {
    @apply px-3;
  }
  
  /* Amélioration des cartes sur mobile */
  .card-mobile {
    @apply p-4 rounded-lg;
  }
  
  /* Tables responsives */
  .table-mobile {
    @apply text-xs;
  }
  
  /* Boutons plus grands sur mobile */
  .btn-mobile {
    @apply min-h-[44px] text-sm;
  }
  
  /* Réduire les espacements sur mobile */
  .spacing-mobile {
    @apply space-y-4;
  }
  
  /* Headers plus petits sur mobile */
  .header-mobile h1 {
    @apply text-2xl leading-tight;
  }
  
  .header-mobile h2 {
    @apply text-xl;
  }
  
  .header-mobile h3 {
    @apply text-lg;
  }
}

/* Amélioration des formulaires mobiles */
@media (max-width: 640px) {
  .form-mobile input,
  .form-mobile textarea,
  .form-mobile select {
    @apply text-base; /* Évite le zoom sur iOS */
  }
  
  /* Navigation mobile */
  .nav-mobile {
    @apply flex-col space-y-2;
  }
  
  /* Grilles adaptatives */
  .grid-mobile {
    @apply grid-cols-1 gap-4;
  }
}

/* Styles pour Crisp Chat */
.crisp-client,
[class*="crisp"],
[class*="cc-"],
iframe[src*="crisp.chat"] {
  z-index: 999999 !important;
}

/* Note: Position handled via $crisp config in CrispPositionManager */

/* Mobile-only: Crisp widget positionné au-dessus des boutons sticky UNIQUEMENT sur les pages de documents */
@media (max-width: 640px) {
  .document-generator-page #crisp-chatbox,
  .document-generator-page .crisp-client,
  .document-generator-page .crisp-client div,
  .document-generator-page .crisp-client iframe,
  .document-generator-page [class*="crisp"],
  .document-generator-page div[class*="crisp"] {
    position: fixed !important;
    bottom: 100px !important;
    right: 20px !important;
    z-index: 999999 !important;
  }
  
  /* Forcer tous les éléments Crisp sur les pages de documents */
  .document-generator-page #crisp-chatbox * {
    bottom: inherit !important;
  }
  
  /* Styling additionnel pour la visibilité */
  .document-generator-page .crisp-client > div {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  }
}

/* Optimisations pour les performances mobile et INP */
button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Optimisations pour éviter les recalculs de layout */
.layout-stable {
  contain: layout style paint;
}

/* Réduire les animations pour améliorer l'INP */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}