/**
 * Custom CSS Variables for On se Thai
 *
 * Ces variables référencent les couleurs Tailwind définies dans tailwind.config.js
 * À utiliser dans les shortcodes et composants pour éviter les couleurs hardcodées
 *
 * Usage dans les shortcodes:
 * background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-700));
 */

/* ==============================================
   Fix: Force fond blanc/gris (override cyan)
   ============================================== */
html, body {
  background-color: #fcfcfc !important;
}

.bg-gray-50 {
  background-color: #f9fafb !important;
}

:root {
  /* Primary colors - Bleu Profond (Design Gemini 2026) */
  --color-primary-50: #e8f0fe;
  --color-primary-100: #c8dbfc;
  --color-primary-200: #9bb9f9;
  --color-primary-300: #6b94f5;
  --color-primary-400: #3d72f0;
  --color-primary-500: #1852e8;
  --color-primary-600: #1040d8;
  --color-primary-700: #0e36c7;
  --color-primary-800: #0d2fb8;
  --color-primary-900: #0c29aa;
  --color-primary-950: #091e7d;

  /* Accent colors - Rouge vif (Design Gemini 2026) */
  --color-accent-50: #fff1f0;
  --color-accent-100: #ffe0de;
  --color-accent-200: #ffc7c4;
  --color-accent-300: #ffa099;
  --color-accent-400: #ff6b61;
  --color-accent-500: #fe160c;
  --color-accent-600: #e3120a;
  --color-accent-700: #c00f08;
  --color-accent-800: #9d0d07;
  --color-accent-900: #820b06;

  /* Background - Design Gemini 2026 */
  --color-background: #fcfcfc;

  /* Neutral colors (Gris) */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* Success (Vert) */
  --color-success: #22c55e;

  /* Warning (Jaune) */
  --color-warning: #eab308;

  /* Error (Rouge) */
  --color-error: #ef4444;

  /* Semantic color aliases pour widgets */
  --widget-gradient-from: var(--color-primary-600);
  --widget-gradient-to: var(--color-primary-700);
  --widget-spinner-color: var(--color-primary-600);
  --widget-link-color: var(--color-primary-600);
  --widget-link-hover: var(--color-primary-700);

  /* Hover et focus states pour widgets */
  --widget-hover-bg: var(--color-primary-50);
  --widget-selected-bg: var(--color-primary-100);
  --widget-focus-shadow: rgba(12, 41, 170, 0.15);
}

/* ==============================================
   Hero Section - Style Gemini 2026
   ============================================== */

/* Cibler avec spécificité suffisante sans !important */
.hero-headline .hero-text-highlight {
  color: var(--color-primary-900);
  font-weight: 700;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.hero-headline .underline-marker {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.hero-headline .underline-marker::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.15em;
  height: 0.12em;
  background: var(--color-accent-marker, #ffb3ae);
  border-radius: 3px;
  transform: rotate(-2.5deg);
}

/* ==============================================
   CTA Compact - Bandeau discret
   ============================================== */

.cta-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background-color: var(--color-primary-600);
  border-radius: 1rem;
  padding: 1.5rem 2rem;
}

.cta-compact-content {
  flex: 1;
}

.cta-compact .cta-compact-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff !important;
  margin: 0 0 0.25rem 0;
}

.cta-compact .cta-compact-description {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0;
}

.cta-compact-action {
  flex-shrink: 0;
}

.cta-compact-button {
  display: inline-block;
  background-color: #fff;
  color: var(--color-primary-600);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.cta-compact-button:hover {
  background-color: var(--color-gray-100);
  transform: translateY(-1px);
}

/* Responsive mobile */
@media (max-width: 640px) {
  .cta-compact {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
  }

  .cta-compact .cta-compact-title {
    font-size: 1.1rem;
  }

  .cta-compact .cta-compact-description {
    font-size: 0.9rem;
  }
}

/* ==============================================
   Ombres améliorées - Style Gemini 2026
   Cible les classes Tailwind existantes
   ============================================== */

/* Boutons primaires avec ombre colorée - spécificité augmentée */
a.bg-primary-600.shadow-lg,
button.bg-primary-600.shadow-lg,
a.bg-primary-700.shadow-lg,
button.bg-primary-700.shadow-lg,
a.bg-primary-900.shadow-lg,
button.bg-primary-900.shadow-lg {
  box-shadow: 0 4px 14px rgba(16, 64, 216, 0.4);
}

a.bg-primary-600.shadow-lg:hover,
button.bg-primary-600.shadow-lg:hover,
a.bg-primary-700.shadow-lg:hover,
button.bg-primary-700.shadow-lg:hover,
a.bg-primary-900.shadow-lg:hover,
button.bg-primary-900.shadow-lg:hover,
a.bg-primary-600.hover\:shadow-xl:hover,
button.bg-primary-600.hover\:shadow-xl:hover,
a.bg-primary-700.hover\:shadow-xl:hover,
button.bg-primary-700.hover\:shadow-xl:hover,
a.bg-primary-900.hover\:shadow-xl:hover,
button.bg-primary-900.hover\:shadow-xl:hover {
  box-shadow: 0 6px 20px rgba(16, 64, 216, 0.5);
  transform: translateY(-2px);
}

/* Ombres générales plus prononcées - spécificité augmentée */
a.shadow-lg,
button.shadow-lg,
div.shadow-lg,
article.shadow-lg {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
}

a.shadow-xl,
button.shadow-xl,
div.shadow-xl,
article.shadow-xl,
a.hover\:shadow-xl:hover,
button.hover\:shadow-xl:hover,
div.hover\:shadow-xl:hover,
article.hover\:shadow-xl:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ==============================================
   Cartes Piliers avec ombres - Style Gemini 2026
   ============================================== */

.pillar-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;
}

.pillar-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 16px 32px rgba(0, 0, 0, 0.06);
  transform: translateY(-4px);
}

/* ==============================================
   Blog Filter Buttons - Style Gemini 2026
   ============================================== */

.filter-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
}

.filter-btn:hover {
  background-color: var(--color-primary-100);
  color: var(--color-primary-900);
}

.filter-btn.active {
  background-color: var(--color-primary-900);
  color: #fff;
}

.filter-btn.active:hover {
  background-color: var(--color-primary-950);
}