/* CCS — Design tokens (cf. design-system/MASTER.md)
   Palette issue de l'identité Instagram @caribbean_conciergerie_service :
   violet nuit (fond du logo), or champagne (hibiscus et lettrage), violet vif (communication). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root {
  /* Marque — violet nuit + or, calés sur la photo de profil Instagram
     (or champagne sur dégradé indigo-violet : bords ~#070417, cœur ~#100E26) */
  --night-950: #0A0620;
  --night-900: #16112E;
  --night-800: #241B46;
  --night-700: #342A5E;
  --night-600: #443677;
  --violet-600: #6D28D9;
  --violet-500: #7C3AED;
  --violet-100: #EDE9FE;
  --gold-600: #8A6F35;
  --gold-500: #B69257;
  --gold-400: #D2B67E;
  --gold-300: #E3CFA0;
  --gold-100: #F6EEDC;

  /* Neutres */
  --sand-50: #FCFBF8;
  --sand-100: #F5F2F5;
  --sand-200: #EAE5EE;
  --ink-900: #1B1530;
  --ink-600: #544B69;
  --ink-400: #857D97;
  --line: #E5DFE9;
  --line-dark: rgba(255, 255, 255, 0.14);
  --white: #FFFFFF;

  /* Statuts — texte -700 sur fond pastel -100, badge 12px/600 = « texte normal » WCAG,
     donc seuil AA 4.5:1 (et non 3:1). Toutes les paires vérifiées ≥ 4.5:1. */
  --ok-700: #1D7C4D;   --ok-100: #E3F4EA;   /* AA 4.55:1 */
  --warn-700: #946300; --warn-100: #FBF0D9; /* AA 4.59:1 */
  --info-700: #6D28D9; --info-100: #EDE9FE;
  --done-700: #5A6B75; --done-100: #ECEFF1;
  --err-700: #B3261E;  --err-100: #F9E4E2;
  /* « En cours » (séjour actif) — bleu sarcelle canonique (cf. MASTER.md).
     Texte -700 sur fond pastel -100 : contraste AA 4.53:1. À ne pas confondre
     avec --info- (violet), réservé aux liens/états « info » (traitée, occupée, départs). */
  --progress-700: #1F7A8C; --progress-100: #ECF6F8;

  /* Typo */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Rythme */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 999px;

  --shadow-soft: 0 1px 2px rgba(18, 14, 38, 0.05), 0 8px 24px rgba(18, 14, 38, 0.07);
  --shadow-lift: 0 2px 4px rgba(18, 14, 38, 0.08), 0 16px 40px rgba(18, 14, 38, 0.14);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-med: 300ms;
  --dur-slow: 550ms;

  --container: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-900);
  background: var(--sand-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 16px; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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