/*
 * GOTAPLANA — Brand tokens (Verde Petróleo, v2 · 2026-09-04)
 *
 * Palette « Verde Petróleo Ébano » : famille adjacente au vert (blue-green)
 * mais volontairement distincte du green Tailwind. Modern, éditorial,
 * jardin premium.
 *
 * L'astuce clef : nous continuons à publier les classes .bg-green-*,
 * .text-green-*, .border-green-* ; elles sont simplement re-mappées ici
 * vers nos tokens Verde Petróleo. Aucun HTML/JSX à toucher : le site
 * change instantanément de couleur.
 */

:root {
  /* Verde Petróleo scale (primary brand) */
  --gp-brand-50:  #ECF3F2;
  --gp-brand-100: #D3E3E0;
  --gp-brand-200: #A8C6C1;
  --gp-brand-300: #78A69F;
  --gp-brand-400: #4E877F;
  --gp-brand-500: #2E6A63;
  --gp-brand-600: #1F5551;
  --gp-brand-700: #164543;   /* signature deep petrol — replaces old orange-700 */
  --gp-brand-800: #0F3634;
  --gp-brand-900: #0B2827;

  /* Warm accent (honey/ochre) — used sparingly for CTA hover / prices */
  --gp-accent-100: #FDF2DE;
  --gp-accent-300: #E8C48A;
  --gp-accent-500: #D4A574;
  --gp-accent-700: #A67A44;

  /* Neutrals (paper / ink) */
  --gp-paper:     #FAF8F4;
  --gp-ink-900:   #0F1F1E;
  --gp-ink-700:   #24403D;
  --gp-ink-500:   #4A6764;

  /* Legacy variable names still referenced in older CSS/JS */
  --gp-orange-50:  var(--gp-brand-50);
  --gp-orange-100: var(--gp-brand-100);
  --gp-orange-200: var(--gp-brand-200);
  --gp-orange-300: var(--gp-brand-300);
  --gp-orange-400: var(--gp-brand-400);
  --gp-orange-500: var(--gp-brand-500);
  --gp-orange-600: var(--gp-brand-600);
  --gp-orange-700: var(--gp-brand-700);
  --gp-orange-800: var(--gp-brand-800);
  --gp-orange-900: var(--gp-brand-900);

  /* Force Tailwind color-* CSS vars (defensive — some builds honor these) */
  --color-green-50:  #ECF3F2 !important;
  --color-green-100: #D3E3E0 !important;
  --color-green-200: #A8C6C1 !important;
  --color-green-300: #78A69F !important;
  --color-green-400: #4E877F !important;
  --color-green-500: #2E6A63 !important;
  --color-green-600: #1F5551 !important;
  --color-green-700: #164543 !important;
  --color-green-800: #0F3634 !important;
  --color-green-900: #0B2827 !important;

  /* Neutralise Tailwind color-orange-* — mapped to deep petrol (utilities like
     bg-orange-600 remain readable with white text via the rules below). */
  --color-orange-50:  #ECF3F2 !important;
  --color-orange-100: #D3E3E0 !important;
  --color-orange-200: #A8C6C1 !important;
  --color-orange-300: #78A69F !important;
  --color-orange-400: #4E877F !important;
  --color-orange-500: #2E6A63 !important;
  --color-orange-600: #164543 !important;
  --color-orange-700: #164543 !important;
  --color-orange-800: #0F3634 !important;
  --color-orange-900: #0B2827 !important;

  /* Warm honey accent replaces Tailwind color-amber-* / color-yellow-* */
  --color-amber-50:  #FDF6E9 !important;
  --color-amber-100: #FDF2DE !important;
  --color-amber-200: #F5E3C1 !important;
  --color-amber-300: #E8C48A !important;
  --color-amber-400: #DBB077 !important;
  --color-amber-500: #D4A574 !important;
  --color-amber-600: #B98A55 !important;
  --color-amber-700: #A67A44 !important;
  --color-amber-800: #7E5A2E !important;
  --color-amber-900: #5A3F1D !important;
  --color-yellow-300: #E8C48A !important;
  --color-yellow-400: #D4A574 !important;
  --color-yellow-500: #B98A55 !important;

  /* Emerald / lime — nudged toward our petrol so accidental usage stays on brand */
  --color-emerald-500: #2E6A63 !important;
  --color-emerald-600: #1F5551 !important;
  --color-emerald-700: #164543 !important;
}

/* Re-map utilities to Verde Petróleo */
.bg-green-50   { background-color: var(--gp-brand-50)  !important; }
.bg-green-100  { background-color: var(--gp-brand-100) !important; }
.bg-green-200  { background-color: var(--gp-brand-200) !important; }
.bg-green-300  { background-color: var(--gp-brand-300) !important; }
.bg-green-400  { background-color: var(--gp-brand-400) !important; }
.bg-green-500  { background-color: var(--gp-brand-500) !important; }
.bg-green-600  { background-color: var(--gp-brand-600) !important; }
.bg-green-700  { background-color: var(--gp-brand-700) !important; }
.bg-green-800  { background-color: var(--gp-brand-800) !important; }
.bg-green-900  { background-color: var(--gp-brand-900) !important; }

.text-green-50   { color: var(--gp-brand-50)  !important; }
.text-green-100  { color: var(--gp-brand-100) !important; }
.text-green-200  { color: var(--gp-brand-200) !important; }
.text-green-300  { color: var(--gp-brand-300) !important; }
.text-green-400  { color: var(--gp-brand-400) !important; }
.text-green-500  { color: var(--gp-brand-500) !important; }
.text-green-600  { color: var(--gp-brand-600) !important; }
.text-green-700  { color: var(--gp-brand-700) !important; }
.text-green-800  { color: var(--gp-brand-800) !important; }
.text-green-900  { color: var(--gp-brand-900) !important; }

.border-green-50   { border-color: var(--gp-brand-50)  !important; }
.border-green-100  { border-color: var(--gp-brand-100) !important; }
.border-green-200  { border-color: var(--gp-brand-200) !important; }
.border-green-300  { border-color: var(--gp-brand-300) !important; }
.border-green-400  { border-color: var(--gp-brand-400) !important; }
.border-green-500  { border-color: var(--gp-brand-500) !important; }
.border-green-600  { border-color: var(--gp-brand-600) !important; }
.border-green-700  { border-color: var(--gp-brand-700) !important; }
.border-green-800  { border-color: var(--gp-brand-800) !important; }
.border-green-900  { border-color: var(--gp-brand-900) !important; }

.ring-green-500  { --tw-ring-color: var(--gp-brand-500) !important; }
.ring-green-600  { --tw-ring-color: var(--gp-brand-600) !important; }
.ring-green-700  { --tw-ring-color: var(--gp-brand-700) !important; }
.divide-green-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--gp-brand-100) !important; }

/* Warm accent — subtle sprinkle */
.text-amber-600,
.text-amber-700,
.text-orange-500,
.text-orange-600,
.text-orange-700 { color: var(--gp-accent-700) !important; }

.bg-amber-50,
.bg-orange-50   { background-color: var(--gp-accent-100) !important; }
.bg-amber-100,
.bg-orange-100  { background-color: var(--gp-accent-100) !important; }
.bg-amber-500,
.bg-orange-500  { background-color: var(--gp-accent-500) !important; }
/* Deep orange badges (with white text) — map to deep petrol for AAA contrast */
.bg-amber-600,
.bg-orange-600  { background-color: var(--gp-brand-700) !important; color: #FFFFFF; }
.bg-amber-700,
.bg-orange-700  { background-color: var(--gp-brand-800) !important; color: #FFFFFF; }
.bg-amber-800,
.bg-orange-800  { background-color: var(--gp-brand-800) !important; color: #FFFFFF; }
.bg-amber-900,
.bg-orange-900  { background-color: var(--gp-brand-900) !important; color: #FFFFFF; }

.border-amber-200,
.border-orange-200 { border-color: var(--gp-accent-300) !important; }
.border-amber-500,
.border-orange-500 { border-color: var(--gp-accent-500) !important; }

/* Hero background — nouveau visuel Verde Petróleo */
.hero-background,
[data-runtime-hero],
section[data-hero],
.hero-section {
  background-image: linear-gradient(135deg, rgba(15,54,52,0.55) 0%, rgba(15,54,52,0.15) 45%, rgba(212,165,116,0.10) 100%), url("/assets/hero-background-current.png?v=20260904d");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Global paper feel */
body { background-color: var(--gp-paper); }

/* Modern focus ring & selection color */
::selection { background: var(--gp-brand-100); color: var(--gp-brand-900); }
:focus-visible { outline: 2px solid var(--gp-brand-500); outline-offset: 2px; }

/* Nicer, more modern primary CTA (progressive enhancement, non-breaking) */
button.bg-green-700,
a.bg-green-700 {
  background-image: linear-gradient(135deg, var(--gp-brand-700) 0%, var(--gp-brand-600) 100%);
  box-shadow: 0 1px 2px rgba(11,40,39,0.10), 0 1px 8px rgba(11,40,39,0.10);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
button.bg-green-700:hover,
a.bg-green-700:hover {
  background-image: linear-gradient(135deg, var(--gp-brand-600) 0%, var(--gp-brand-500) 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(11,40,39,0.14), 0 8px 20px rgba(11,40,39,0.14);
}

/* Cards: subtle petrol tint on hover */
[data-runtime-card],
.snapshot-root .grid > article,
.snapshot-root .grid > a {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
[data-runtime-card]:hover,
.snapshot-root .grid > article:hover,
.snapshot-root .grid > a:hover {
  border-color: var(--gp-brand-200);
  box-shadow: 0 8px 24px rgba(15,54,52,0.10);
  transform: translateY(-2px);
}

/* Header top promo bar accent */
.bg-green-700 .rv-trigger-item,
header .bg-green-700 { letter-spacing: 0.02em; }

/* Small polish: rounded chips get glassy feel */
.rounded-full.bg-green-100,
.rounded-full.bg-green-50 {
  backdrop-filter: saturate(140%);
}

/* Hide empty promo countdown so we don't display a lonely "en actualización" */
[data-runtime-promo-countdown]:empty { display: none !important; }
[data-runtime-promo-countdown][data-empty="1"] { display: none !important; }