/*
 * Dunk & Food — couche « skin » (chargée avant premium.css).
 * Tout le système de design vit dans premium.css ; ce fichier ne porte que les
 * jetons de marque partagés et les utilitaires signature (pastille de prix
 * brique, mot display Titan One, anneau « swoosh » du logo) réutilisés partout.
 *
 * DA tirée du menu papier + site vitrine dunkandfood.fr : rose poudré #f1c2bc,
 * rouge brique #b0241f, brun bordeaux #562a29 / #2a0a09, crème #f8ebee.
 * Le resto vit dans le complexe basket The One Ball — le swoosh du logo est
 * l'orbite du ballon, on le rejoue en motif.
 */
:root {
  --df-brick: #b0241f;        /* rouge brique signature (logo, CTA, prix) */
  --df-brick-2: #c9382f;      /* brique hover */
  --df-brick-deep: #8a1b17;   /* brique profond (dégradés, hover foncé) */
  --df-wine: #562a29;         /* brun bordeaux (titres secondaires) */
  --df-ink: #2a0a09;          /* brun quasi noir (texte) */
  --df-rose: #f1c2bc;         /* rose poudré (fond de page) */
  --df-rose-2: #eab0a8;       /* rose plus soutenu (surfaces pressées) */
  --df-pale: #f8ebee;         /* rose pâle (cartes) */
  --df-cream: #fbf4f2;        /* crème (surfaces les plus claires) */
  --df-teal: #2e6f63;         /* vert céramique des assiettes (accent discret) */
  --df-line: rgba(86, 42, 41, 0.16);
  --df-line-strong: rgba(86, 42, 41, 0.3);
  --df-line-rose: rgba(248, 235, 238, 0.28);   /* lignes sur fond brique */
  --df-shadow: 0 24px 60px rgba(86, 42, 41, 0.22);
  --df-shadow-soft: 0 12px 34px rgba(86, 42, 41, 0.14);
  --df-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

/* Pastille de prix brique : motif signature du menu papier */
.df-price {
  display: inline-block;
  padding: 0.3em 0.85em;
  border-radius: var(--radius-full);
  background: var(--df-brick);
  color: var(--df-pale);
  font-family: var(--font-family-heading);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  line-height: 1.2;
  white-space: nowrap;
}

/* Mot display façon logo (Titan One) */
.df-script {
  font-family: var(--font-family-heading);
  font-weight: 400;
  color: var(--df-brick);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Prix nu brique (sans pastille), pour les listes serrées */
.df-price-flat {
  font-family: var(--font-family-heading);
  font-weight: 400;
  color: var(--df-brick);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}

/* Anneau « swoosh » du logo : orbite elliptique posée derrière un visuel.
   S'utilise dans un conteneur position:relative via <span class="df-swoosh"></span>. */
.df-swoosh {
  position: absolute;
  left: 50%; top: 56%;
  width: 118%; aspect-ratio: 2.6 / 1;
  transform: translate(-50%, -50%) rotate(-9deg);
  border: clamp(8px, 1.6vw, 18px) solid currentColor;
  border-radius: 50%;
  color: var(--df-pale);
  opacity: 0.85;
  pointer-events: none;
}

/* Étincelle ✦ des visuels de marque (déco) */
.df-spark {
  display: inline-block;
  width: 0.55em; height: 0.55em;
  background: currentColor;
  clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
}