/* Travaux DIY — Design tokens (palette Sorbet / glassmorphism)
   Repris fidèlement de 03 DESIGN/root.css (source de vérité).
   Complété par les valeurs verre "hero" et le dégradé de pied de page
   effectivement utilisés dans la maquette de référence. */

:root {
  /* Couleurs — fonds */
  --color-bg: #FDF6FA;
  --color-surface: #FFFFFF;
  --color-footer-bg: #F7E9F1;

  /* Couleurs — texte */
  --color-ink: #2A2340;
  --color-ink-muted: #54506B;

  /* Couleurs — filets */
  --color-border: #EFE3EC;

  /* Couleurs — accents Sorbet */
  --color-corail: #FF4D79;
  --color-rose: #FF6F91;
  --color-peche: #FFB25A;
  --color-menthe: #4ED6B8;

  /* Dégradés */
  --gradient-cta: linear-gradient(135deg, #FF6F91, #FFB25A);
  --gradient-newsletter: linear-gradient(135deg, #FF6F91, #FFB25A 55%, #FFC97A);
  --gradient-page-wash:
    radial-gradient(circle at 12% 6%, rgba(255,77,121,0.20), transparent 38%),
    radial-gradient(circle at 88% 16%, rgba(78,214,184,0.16), transparent 34%),
    radial-gradient(circle at 55% 48%, rgba(255,178,90,0.14), transparent 42%),
    radial-gradient(circle at 20% 85%, rgba(255,111,145,0.14), transparent 36%);
  --gradient-footer-wash:
    linear-gradient(160deg, rgba(255,111,145,0.10), rgba(255,178,90,0.08) 45%, rgba(78,214,184,0.08));

  /* Verre dépoli (glassmorphism) */
  --glass-bg: rgba(255,255,255,0.6);          /* cartes, header */
  --glass-bg-hero: rgba(255,255,255,0.62);    /* hero, carte auteur, stat-cards */
  --glass-bg-strong: rgba(255,255,255,0.85);  /* tags/badges sur fond coloré */
  --glass-bg-fallback: rgba(255,255,255,0.9); /* sans support backdrop-filter */
  --glass-border: rgba(255,255,255,0.7);
  --glass-blur: blur(14px);                    /* cartes, header */
  --glass-blur-hero: blur(18px);               /* hero, auteur, stat-cards */
  --glass-shadow: 0 8px 28px rgba(42,35,64,0.1);
  --glass-shadow-card: 0 6px 20px rgba(42,35,64,0.08);

  /* Badge tag rubrique sur image (corail translucide) */
  --tag-overlay-bg: rgba(255,77,121,0.85);

  /* Encadrés conseil */
  --color-astuce-bg: rgba(78,214,184,0.14);
  --color-astuce-border: rgba(78,214,184,0.45);
  --color-astuce-text: #1F7A64;
  --color-aeviter-bg: rgba(255,77,121,0.10);
  --color-aeviter-border: rgba(255,77,121,0.4);
  --color-aeviter-text: #C41F52;
  --color-checklist-bg: rgba(255,178,90,0.16);
  --color-checklist-border: rgba(255,178,90,0.45);
  --color-checklist-text: #9C5A10;

  /* Placeholder (aplat rayé, avant vraies images) */
  --ph-bg: repeating-linear-gradient(45deg, #F7E3ED, #F7E3ED 12px, #FDF2F8 12px, #FDF2F8 24px);

  /* Typographie */
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-h1: clamp(30px, 5vw, 46px);
  --fs-h2: 28px;
  --fs-h3: 20px;
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-caption: 13px;

  /* Échelle d'espacement */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 56px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* Rayons */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Ombres */
  --shadow-soft: 0 4px 16px rgba(42,35,64,0.08);
  --shadow-strong: 0 8px 28px rgba(42,35,64,0.1);

  /* Largeurs de contenu */
  --wrap-wide: 1240px;
  --wrap-article: 1000px;
  --wrap-narrow: 800px;
}

@supports not (backdrop-filter: blur(1px)) {
  .glass { background: var(--glass-bg-fallback) !important; }
}