/* ==========================================================================
   INTIMLY — TOKENS DE DESIGN
   Source de vérité : intimly-journal/tailwind.config.ts + app/globals.css
   Ne JAMAIS diverger de ces valeurs sans mettre à jour les deux apps.
   ========================================================================== */

:root {
  /* --- Couleurs de marque (identiques Journal + Accords) --- */
  --intimly-bordeaux: #9A0C34;
  --intimly-bordeaux-fonce: #6E0824;
  --intimly-rose-pale: #F2E5E3;
  --intimly-dore: #D4A574;
  --intimly-encre: #333333;
  --intimly-blanc: #FFFFFF;

  /* --- Dérivées (opacités de l'encre utilisées dans les apps) --- */
  --intimly-encre-80: rgba(51, 51, 51, 0.80);
  --intimly-encre-70: rgba(51, 51, 51, 0.70);
  --intimly-encre-60: rgba(51, 51, 51, 0.60);
  --intimly-encre-50: rgba(51, 51, 51, 0.50);
  --intimly-encre-40: rgba(51, 51, 51, 0.40);
  --intimly-encre-15: rgba(51, 51, 51, 0.15);
  --intimly-rose-pale-60: rgba(242, 229, 227, 0.60);

  /* --- Fonds --- */
  --intimly-fond: var(--intimly-rose-pale);
  --intimly-fond-carte: var(--intimly-blanc);
  --intimly-degrade-wine: linear-gradient(135deg, #9A0C34 0%, #6E0824 100%);
  --intimly-degrade-doux: linear-gradient(180deg, #F2E5E3 0%, #FFFFFF 100%);

  /* --- Typographie --- */
  --intimly-font-serif: 'Playfair Display', Georgia, serif;
  --intimly-font-sans: 'Montserrat', system-ui, -apple-system, sans-serif;

  --intimly-fs-eyebrow: 0.75rem;      /* 12px, capitales espacées */
  --intimly-fs-small: 0.875rem;       /* 14px */
  --intimly-fs-body: 1rem;            /* 16px */
  --intimly-fs-lead: 1.125rem;        /* 18px */
  --intimly-fs-h4: 1.25rem;           /* 20px */
  --intimly-fs-h3: 1.5rem;            /* 24px */
  --intimly-fs-h2: 2rem;              /* 32px */
  --intimly-fs-h1: 2.75rem;           /* 44px */
  --intimly-fs-display: 3.5rem;       /* 56px — hero desktop */

  --intimly-lh-titre: 1.2;
  --intimly-lh-texte: 1.7;
  --intimly-ls-eyebrow: 0.18em;

  /* --- Rayons (rounded-intimly = 1.25rem dans les apps) --- */
  --intimly-radius-sm: 0.75rem;       /* champs de formulaire (rounded-xl) */
  --intimly-radius: 1.25rem;          /* cartes — le rayon signature */
  --intimly-radius-lg: 1.75rem;       /* grandes sections */
  --intimly-radius-pill: 9999px;      /* boutons pilule */

  /* --- Ombres (teintées bordeaux, jamais du noir pur) --- */
  --intimly-shadow-sm: 0 1px 3px rgba(110, 8, 36, 0.06);
  --intimly-shadow: 0 4px 16px rgba(110, 8, 36, 0.08);
  --intimly-shadow-lg: 0 12px 32px rgba(110, 8, 36, 0.12);

  /* --- Espacement (échelle utilisée par les sections du site) --- */
  --intimly-space-xs: 0.5rem;
  --intimly-space-sm: 1rem;
  --intimly-space-md: 1.5rem;
  --intimly-space-lg: 2.5rem;
  --intimly-space-xl: 4rem;
  --intimly-space-section: 5.5rem;

  /* --- Transitions --- */
  --intimly-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Largeur de contenu --- */
  --intimly-content-width: 1140px;
  --intimly-content-narrow: 760px;
}

/* Ajustements mobiles de l'échelle typographique */
@media (max-width: 767px) {
  :root {
    --intimly-fs-display: 2.25rem;   /* 36px */
    --intimly-fs-h1: 2rem;           /* 32px */
    --intimly-fs-h2: 1.625rem;       /* 26px */
    --intimly-fs-h3: 1.3125rem;      /* 21px */
    --intimly-space-section: 3.5rem;
  }
}

/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
  :root { --intimly-transition: 0ms; }
}