/* Copie déployable de design/tokens.css (source de vérité : design/). Régénérer : cp design/tokens.css app/tokens.css */ /* ========================================================================== Duonom — Design System « Argile Organique » Source : projet claude.ai/design (Duonom - Design System.dc.html) Tokens sémantiques (clair + sombre) + composants réutilisables. Polices : DM Serif Display (prénoms) + Figtree (UI) — à charger via dans le ; fallback Georgia/system si indisponible. ========================================================================== */ :root { /* — Mode clair (défaut) — */ --bg:#F1E4D5; /* sable */ --surface:#FBF4EA; --muted-bg:#EAD9C2; /* galet */ --accent:#C56B4A; /* terracotta */ --accent-ink:#FBF4EA; --secondary:#8B9E7E; /* sauge */ --gold:#D9A25E; /* or doux */ --ink:#3A2E26; /* texte */ --ink-soft:#94836F; /* texte doux */ --ink-body:#5C4E43; /* variantes de recherche (garçon / fille / surprise) */ --boy:#6E8360; --boy-bg:#EEF0E6; --girl:#C56B4A; --girl-bg:#F6E4DC; --surprise:#D9A25E; --surprise-bg:#F5E7CF; /* rayons & espacement (grille 4px) */ --r-16:16px; --r-20:20px; --r-24:24px; --r-30:30px; --r-42:42px; --pill:99px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --shadow-card:0 14px 30px -14px rgba(90,60,40,.3); --shadow-soft:0 8px 20px -12px rgba(90,60,40,.3); --shadow-btn:0 10px 24px -6px rgba(197,107,74,.7); --shadow-phone:0 26px 54px -22px rgba(90,60,40,.42), inset 0 0 0 1px rgba(0,0,0,.04); --serif:'DM Serif Display', Georgia, 'Iowan Old Style', serif; --sans:'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } @media (prefers-color-scheme: dark) { :root { --bg:#241C16; --surface:#2E241D; --muted-bg:#3B2E24; --accent:#D98063; --accent-ink:#241C16; --secondary:#9DB088; --gold:#E3B978; --ink:#F2E7D9; --ink-soft:#A8927C; --ink-body:#C6B4A6; --boy:#9DB088; --boy-bg:#2C332A; --girl:#D98063; --girl-bg:#3A2820; --surprise:#E3B978; --surprise-bg:#332a1c; --shadow-card:0 14px 30px -14px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.05); --shadow-phone:0 26px 54px -20px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.06); } } :root[data-theme="light"]{--bg:#F1E4D5;--surface:#FBF4EA;--muted-bg:#EAD9C2;--accent:#C56B4A;--accent-ink:#FBF4EA;--secondary:#8B9E7E;--gold:#D9A25E;--ink:#3A2E26;--ink-soft:#94836F;--ink-body:#5C4E43;--boy:#6E8360;--boy-bg:#EEF0E6;--girl:#C56B4A;--girl-bg:#F6E4DC;--surprise:#D9A25E;--surprise-bg:#F5E7CF;--shadow-card:0 14px 30px -14px rgba(90,60,40,.3);--shadow-phone:0 26px 54px -22px rgba(90,60,40,.42),inset 0 0 0 1px rgba(0,0,0,.04);} :root[data-theme="dark"]{--bg:#241C16;--surface:#2E241D;--muted-bg:#3B2E24;--accent:#D98063;--accent-ink:#241C16;--secondary:#9DB088;--gold:#E3B978;--ink:#F2E7D9;--ink-soft:#A8927C;--ink-body:#C6B4A6;--boy:#9DB088;--boy-bg:#2C332A;--girl:#D98063;--girl-bg:#3A2820;--surprise:#E3B978;--surprise-bg:#332a1c;--shadow-card:0 14px 30px -14px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.05);--shadow-phone:0 26px 54px -20px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.06);} *{box-sizing:border-box;} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;} /* — formes galets — */ .blob{border-radius:52% 48% 60% 40%/55% 45% 55% 45%;} .blob2{border-radius:48% 52% 42% 58%/58% 42% 58% 42%;} /* — typo — */ .serif{font-family:var(--serif);} .kicker{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);} /* — chips / badges tendance — */ .chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:7px 13px;border-radius:22px;} .chip.classic{background:var(--boy-bg);color:var(--boy);} .chip.trend{background:var(--accent);color:var(--accent-ink);} .chip.rare{background:var(--surprise-bg);color:#B08540;} /* — boutons de swipe (cibles >= 44px) — */ .swipe-btn{border:0;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .12s ease;} .swipe-btn:active{transform:scale(.9);} .swipe-btn.no{width:50px;height:50px;background:var(--surface);box-shadow:0 6px 16px -6px rgba(90,60,40,.3),inset 0 0 0 1px var(--muted-bg);} .swipe-btn.star{width:58px;height:58px;background:var(--secondary);box-shadow:0 10px 24px -6px rgba(139,158,126,.7);margin-top:-4px;} .swipe-btn.yes{width:50px;height:50px;background:var(--accent);box-shadow:var(--shadow-btn);} /* — bouton principal — */ .btn{border:0;cursor:pointer;font-family:inherit;font-weight:700;border-radius:var(--r-20);padding:16px;font-size:15px;background:var(--accent);color:var(--accent-ink);box-shadow:0 12px 26px -8px rgba(197,107,74,.6);width:100%;} .btn.ghost{background:transparent;color:var(--ink-soft);box-shadow:none;font-weight:600;} /* — toast — */ .toast{background:var(--ink);color:var(--surface);border-radius:var(--r-16);padding:13px 16px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:10px;box-shadow:0 10px 24px -10px rgba(90,60,40,.5);} .toast .star{color:var(--gold);} @media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;}}