/* Design tokens, direction A "Douceur" (maquettes du 2026-10-21).
   Fonts: Fredoka (display, OFL) + Didact Gothic (body, OFL), self-hosted, see fonts.css. */
:root {
  /* color */
  --color-bg: #FFF8EE;
  --color-surface: #ffffff;
  --color-ink: #34243a;
  --color-ink-soft: #6a566f;
  --color-accent: #D61F5E;        /* primary buttons, links, highlights; white text on it = 4.9:1 */
  --color-error: #b3123f;
  --color-line: #f0dcc6;
  --color-hover: #fbe3d0;
  --color-tint-pink: #fde1ea;     /* Doudous */
  --color-tint-teal: #d6f1f3;     /* about band, empty states, CE badge */
  --color-tint-yellow: #fff0c2;   /* Accessoires */
  --color-footer-bg: #34243a;
  --color-footer-ink: #fff8ee;

  /* type */
  /* Both stacks end with the colour emoji fonts of each system: the web fonts have no emoji. */
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --font-display: 'Fredoka', system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --font-body: 'Didact Gothic', system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --fw-display: 600;
  --fw-ui: 500;
  --text-body: 1.125rem;          /* 18px desktop */
  --text-body-sm: 0.9375rem;      /* 15px captions */
  --text-h1: clamp(2.5rem, 5vw, 4rem);
  --text-h2: clamp(1.875rem, 3.4vw, 2.75rem);
  --lh-body: 1.55;
  --lh-title: 1.1;

  /* shape */
  --radius-pill: 999px;
  --radius-img: 22px;
  --radius-card: 28px;
  --radius-panel: 40px;
  --shadow-soft: 0 2px 0 var(--color-line);

  /* layout */
  --wrap-max: 1160px;
  --gutter: 16px;
  --gutter-lg: 40px;
  --tap-min: 48px;

  /* motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: .12s;
  --dur-base: .25s;
  --dur-slow: .6s;
}

/* One switch for every animation and transition of the site (landing, forms, hover effects). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}