/* ============================================================ DESIGN TOKENS — thème blanc & rose Un blanc cassé chaud (jamais un blanc froid clinique), une encre aubergine (jamais un gris/noir générique), et une couleur de fusion rose vif née de la rencontre entre la teinte de Noam (corail chaud) et celle de Camille (indigo froid). ============================================================ */ :root { /* Couleurs de personne */ --color-noam: #ff7a4d; --color-noam-dim: #ffd6c2; --color-noam-soft: #fff0e7; --color-camille: #5b6ef5; --color-camille-dim: #cdd3fc; --color-camille-soft: #eef0ff; /* Couleur de fusion : le rose, née de la rencontre des deux */ --color-fusion: #ff3e7f; --color-fusion-dim: #ffb8d1; --color-fusion-soft: #ffe7f0; /* Fond & matière — blanc rosé, jamais un blanc pur clinique */ --bg-paper: #fff9fb; --bg-raised: #ffffff; --bg-raised-2: #fff0f5; --bg-sunken: #ffeef4; /* Texte — encre aubergine plutôt que gris/noir générique */ --text-high: #33101f; --text-mid: #8a6675; --text-low: #c7a9b5; --text-on-accent: #33101f; /* Lignes & tons */ --line: rgba(51, 16, 31, 0.1); --line-strong: rgba(51, 16, 31, 0.18); --tint: rgba(255, 62, 127, 0.06); /* Typo */ --font-display: "Fraunces", "Iowan Old Style", serif; --font-body: "Inter", -apple-system, "Segoe UI", sans-serif; /* Forme */ --radius-lg: 28px; --radius-md: 18px; --radius-sm: 10px; --radius-pill: 999px; /* Mouvement */ --ease-soft: cubic-bezier(0.16, 1, 0.3, 1); --ease-heart: cubic-bezier(0.45, 0, 0.55, 1); --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 180ms; --dur-med: 420ms; --dur-slow: 900ms; /* Ombres — teintées rose, jamais un gris neutre */ --shadow-soft: 0 10px 32px -12px rgba(255, 62, 127, 0.28); --shadow-lift: 0 20px 50px -18px rgba(51, 16, 31, 0.22); --shadow-card: 0 2px 14px -4px rgba(51, 16, 31, 0.08); --noise-opacity: 0.03; /* Village — tons doux qui restent dans la famille rose/blanc */ --village-grass-a: #e2f1e0; --village-grass-b: #d3ebd1; --village-path: #ecdfc7; --village-water: #d3e6fb; } /* Thème par joueur : posé sur */ body[data-player="noam"] { --color-self: var(--color-noam); --color-self-dim: var(--color-noam-dim); --color-other: var(--color-camille); --color-other-dim: var(--color-camille-dim); } body[data-player="camille"] { --color-self: var(--color-camille); --color-self-dim: var(--color-camille-dim); --color-other: var(--color-noam); --color-other-dim: var(--color-noam-dim); }