/* Design system de Terre d'Ivoire (document « Prompts UI façon Lagos Life », prompt 1).
   Toute couleur, tout rayon et toute ombre de l'interface passent par ces jetons. */
:root {
  /* Polices */
  --f-display: 'Fredoka', 'Plus Jakarta Sans', system-ui, sans-serif;
  --f-text: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-body: 15px; --fs-body-l: 16px; --fs-label: 12px;
  /* Couleurs (chaque jeton a sa version « -rgb » pour les transparences : rgb(var(--c-ink-rgb) / .5)) */
  --c-white: #ffffff; --c-white-rgb: 255 255 255;
  --c-black: #000000; --c-black-rgb: 0 0 0;
  --c-ink: #1d2433; --c-ink-rgb: 29 36 51;
  --c-ink-2: #475569; --c-ink-2-rgb: 71 85 105;
  --c-muted: #818898; --c-muted-rgb: 129 136 152;
  --c-line: #e5e7eb; --c-line-rgb: 229 231 235;
  --c-line-2: #cbd5e1; --c-line-2-rgb: 203 213 225;
  --c-night: #0f172a; --c-night-rgb: 15 23 42;
  --c-night-2: #1f1b2e; --c-night-2-rgb: 31 27 46;
  --c-night-3: #334155; --c-night-3-rgb: 51 65 85;
  --c-bg: #eef2f7; --c-bg-rgb: 238 242 247;
  --c-soft: #f3f5f9; --c-soft-rgb: 243 245 249;
  --c-portrait: #eaf2ff; --c-portrait-rgb: 234 242 255;
  --c-accent: #f77f00; --c-accent-rgb: 247 127 0;
  --c-accent-d: #b35c00; --c-accent-d-rgb: 179 92 0;
  --c-accent-l: #ff9f1c; --c-accent-l-rgb: 255 159 28;
  --c-accent-bg: #fff1e0; --c-accent-bg-rgb: 255 241 224;
  --c-ok: #009a44; --c-ok-rgb: 0 154 68;
  --c-ok-d: #006b30; --c-ok-d-rgb: 0 107 48;
  --c-ok-l: #22c55e; --c-ok-l-rgb: 34 197 94;
  --c-ok-bg: #dcfce7; --c-ok-bg-rgb: 220 252 231;
  --c-danger: #c6324e; --c-danger-rgb: 198 50 78;
  --c-danger-d: #b91c1c; --c-danger-d-rgb: 185 28 28;
  --c-danger-l: #fca5a5; --c-danger-l-rgb: 252 165 165;
  --c-danger-bg: #fee2e2; --c-danger-bg-rgb: 254 226 226;
  --c-yellow: #facc15; --c-yellow-rgb: 250 204 21;
  --c-yellow-d: #92400e; --c-yellow-d-rgb: 146 64 14;
  --c-yellow-l: #fde68a; --c-yellow-l-rgb: 253 230 138;
  --c-yellow-bg: #fef3c7; --c-yellow-bg-rgb: 254 243 199;
  --c-blue: #2c6fd1; --c-blue-rgb: 44 111 209;
  --c-blue-l: #8fd3ff; --c-blue-l-rgb: 143 211 255;
  --c-blue-bg: #e8f6ff; --c-blue-bg-rgb: 232 246 255;
  --c-violet: #7c3aed; --c-violet-rgb: 124 58 237;
  --c-violet-l: #c4b5fd; --c-violet-l-rgb: 196 181 253;
  --c-violet-bg: #ede9fe; --c-violet-bg-rgb: 237 233 254;
  --c-pink: #ec4899; --c-pink-rgb: 236 72 153;
  --c-pink-bg: #fdf2f8; --c-pink-bg-rgb: 253 242 248;
  --c-teal: #0891b2; --c-teal-rgb: 8 145 178;
  --c-teal-d: #0e7490; --c-teal-d-rgb: 14 116 144;
  --c-violet-d: #4c1d95; --c-violet-d-rgb: 76 29 149;
  --c-plum: #3b0d4f; --c-plum-rgb: 59 13 79;
  --c-wine: #5b1a1a; --c-wine-rgb: 91 26 26;
  --c-coral: #ff6b6b; --c-coral-rgb: 255 107 107;
  --c-blue-d: #1e40af; --c-blue-d-rgb: 30 64 175;
  --c-blue-2: #3a86ff; --c-blue-2-rgb: 58 134 255;
  --c-mint: #a6f0c6; --c-mint-rgb: 166 240 198;
  --c-forest: #0b3d1e; --c-forest-rgb: 11 61 30;
  --c-gold: #e9c46a; --c-gold-rgb: 233 196 106;
  --c-amber: #ffb347; --c-amber-rgb: 255 179 71;
  /* Téléphone (prompt 7) : fond d'écran « Abidjan » (dégradé vertical) et app Classement (vert très foncé, podium) */
  --c-ph-top: #353a9b; --c-ph-top-rgb: 53 58 155;
  --c-ph-mid: #773fdf; --c-ph-mid-rgb: 119 63 223;
  --c-ph-bot: #eea542; --c-ph-bot-rgb: 238 165 66;
  --c-rank: #0d2318; --c-rank-rgb: 13 35 24;
  --c-rank-2: #173a29; --c-rank-2-rgb: 23 58 41;
  --c-silver: #cfd6df; --c-silver-rgb: 207 214 223;
  --c-bronze: #d08a4e; --c-bronze-rgb: 208 138 78;
  /* Besoins : couleur fixe partout, teinte foncée pour le texte des puces */
  --need-faim: #f59e42; --need-faim-d: #aa5800;
  --need-energie: #3b82f6; --need-energie-d: #1d4ed8;
  --need-fun: #eab308; --need-fun-d: #986400;
  --need-social: #ec4899; --need-social-d: #c81f7b;
  --need-hygiene: #14b8a6; --need-hygiene-d: #007b6c;
  --need-vessie: #8b5cf6; --need-vessie-d: #7b49e3;
  /* Formes : aucun angle vif */
  --r-sm: 12px; --r-ctl: 16px; --r-card: 20px; --r-panel: 26px; --r-pill: 9999px;
  --surf-panel: rgb(255 255 255 / .97); --surf-float: rgb(255 255 255 / .92);
  --sh-card: 0 0 0 1px #e5e7eb, 0 1px 2px rgb(17 24 39 / .06), 0 2px 6px rgb(17 24 39 / .04);
  --sh-float: inset 0 0 0 1px rgb(29 36 51 / .08), 0 8px 28px rgb(22 32 60 / .16);
  /* Bouton principal en relief : « 0 4px 0 <teinte foncée> » (5 px au survol), écrit dans la règle du bouton avec
     sa propre --relief, car une variable de :root ne lit pas celle de l'élément. */
  --sh-relief-press: 0 2px 4px -2px rgb(0 0 0 / .3);
  /* Mouvement */
  --ease: cubic-bezier(.4, 0, .2, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-rise: cubic-bezier(.2, .7, .2, 1);
  --t-msg: 220ms; --t-in: 300ms; --t-bubble: 350ms; --t-ring: 1.6s;
  /* Couches */
  --z-world: 10; --z-hud: 20; --z-panel: 50; --z-modal: 70; --z-toast: 90; --z-system: 100;
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-msg: 0ms; --t-in: 0ms; --t-bubble: 0ms; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}