/* Feuilles d'automne — generated from tokens.json */
:root, [data-theme="paper"] {
  --paper: #fffdf9; /* Fond principal : cartes, pages du site, formulaire. Blanc cassé à peine chaud, comme un papier coton. */
  --paper-warm: #f8f1e7; /* Fond secondaire : bandeaux de section, blocs d'infos pratiques, arrière-plan derrière une carte imprimée. */
  --ink: #221c18; /* Texte principal et filet vertical sur `paper` (16.6:1) et `paper-warm` (15:1). Fond des boutons principaux. */
  --ink-muted: #5e544c; /* Texte secondaire (lieu, mentions, aide de champ) sur `paper` (7.3:1) et `paper-warm` (6.6:1). */
  --line: #221c18; /* Le filet vertical fin de la composition « split » et les filets horizontaux décoratifs. Toujours 1px. */
  --line-soft: #e6dccf; /* Séparateurs discrets entre blocs d'infos, sur `paper`. Décoratif uniquement, jamais comme bordure de champ. */
  --control-border: #857869; /* Bordure des champs, cases et options RSVP sur `paper` (4.2:1) et `paper-warm` (3.8:1). */
  --gold: #b47f38; /* Or ocre du « the » manuscrit et des esperluettes. Uniquement en grand (24px+) : 3.4:1 sur `paper`, 3.1:1 sur `paper-warm`. */
  --gold-text: #8a5a1c; /* Or lisible pour petits textes et liens sur `paper` (5.8:1) et `paper-warm` (5.3:1). */
  --maple-yellow: #f0b43c; /* Feuille jaune d'érable. Illustration et motifs uniquement, jamais pour du texte. */
  --maple-orange: #e07a2c; /* Feuille orange. Illustration, motifs, petites éclaboussures. Jamais pour du texte courant (2.96:1). */
  --maple-red: #b5312a; /* Feuille rouge, couleur signature. Fond du bouton d'accent (texte `paper`, 6:1) et accents d'illustration. */
  --maple-wine: #7f1f1d; /* Rouge profond des nervures et feuilles sombres. Anneau de focus (2px) et survol du bouton d'accent ; `paper` dessus à 9.8:1. */
  --wash-peach: #f5d9b5; /* Lavis aquarelle pêche derrière les feuilles. Fonds de décor uniquement, à faible surface. */
  --on-accent: #fffdf9; /* Texte sur `ink`, `maple-red` et `maple-wine`. */
  --focus: var(--maple-wine); /* Anneau de focus clavier, 2px plein, décalé de 2px : 9.8:1 sur `paper`, 8.9:1 sur `paper-warm`. */
  --success: #2b5a6b; /* Confirmation (réponse RSVP enregistrée), avec une icône ✓ et le mot. Bleu-vert sapin, 7.4:1 sur `paper`, distinct du rouge par la teinte bleue. */
  --error: #a3261f; /* Erreur de champ, toujours accompagnée du mot « Erreur » ou d'un message : 7.2:1 sur `paper`. */
  --shadow-paper: 0 1px 2px rgba(34, 28, 24, 0.06), 0 14px 32px rgba(34, 28, 24, 0.10); /* Une carte posée sur `paper-warm` (aperçu du save the date, formulaire). Seule ombre du système. */
}
:root {
  --space-1: 4px; /* Écart icône–texte. */
  --space-2: 8px; /* Écart libellé–champ, entre options serrées. */
  --space-3: 12px; /* Padding vertical des boutons et champs. */
  --space-4: 16px; /* Gouttière mobile, écart entre champs. */
  --space-6: 24px; /* Padding des blocs d'infos, padding horizontal des boutons. */
  --space-8: 32px; /* Écart entre blocs ; écart filet–texte dans la composition split. */
  --space-12: 48px; /* Écart entre sections sur mobile ; marges d'une carte imprimée. */
  --space-16: 64px; /* Écart entre sections sur desktop. */
  --space-24: 96px; /* Respiration autour du titre d'accueil ; le blanc est un ingrédient du thème. */
  --radius-none: 0; /* Cartes imprimées et blocs : bords francs comme du papier. */
  --radius-sm: 2px; /* Boutons, champs, options RSVP. */
  --radius-pill: 999px; /* Pastilles d'état (Confirmé) uniquement. */
  --border-hairline: 1px; /* Épaisseur unique des filets et des bordures de champs. */
  --measure: 36rem; /* Largeur maximale d'une colonne de texte ou du formulaire. */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-script: "Mrs Saint Delafield", "Allura", cursive;
  --font-sans: "Jost", "Futura", system-ui, sans-serif;
  --text-display-xl: 400 88px/0.95 var(--font-display); /* Les mots « Save » et « Date » de la carte ; titre d'accueil du site. */
  --text-display-l: 400 56px/1 var(--font-display); /* Titre de page du site (Infos pratiques, Réponse). */
  --text-heading: 500 32px/38px var(--font-display); /* Titres de section. */
  --text-title: 500 24px/30px var(--font-display); /* Titre d'un bloc d'infos ou d'une carte. */
  --text-date: 500 30px/34px var(--font-display); /* La date en chiffres, format JJ.MM.AAAA, sous « Date ». */
  --text-names: 500 34px/40px var(--font-display); /* Les prénoms des mariés, toujours en capitales espacées ; l'esperluette en `gold`. */
  --text-place: 500 20px/26px var(--font-display); /* Le lieu sous les prénoms, en capitales espacées, couleur `ink`. */
  --text-script: 400 72px/1 var(--font-script); /* Un seul mot manuscrit par composition (« the », « & », « merci »), en `gold`, jamais en dessous de 40px. */
  --text-lead: italic 400 24px/32px var(--font-display); /* Phrase d'accompagnement en italique, couleur `ink-muted`. */
  --text-body: 400 17px/28px var(--font-sans); /* Texte courant du site et du formulaire. */
  --text-small: 400 14px/22px var(--font-sans); /* Aide de champ, mentions, légendes. */
  --text-label: 500 13px/18px var(--font-sans); /* Libellés de champs, boutons et petits surtitres, en capitales. */
}
.display-xl {
  font-family: var(--font-display);
  font-size: 88px;
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: 0;
}
.display-l {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
}
.heading {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 38px;
  font-weight: 500;
  letter-spacing: 0;
}
.title {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: 0;
}
.date {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 34px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.names {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: 0.2em;
}
.place {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: 0.16em;
}
.script {
  font-family: var(--font-script);
  font-size: 72px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
}
.lead {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0;
  font-style: italic;
}
.body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
}
.small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0.16em;
}