@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&display=swap');

/* =============================================================
   design-system.css — Charte graphique Rocado
   Source de vérité des couleurs / typo / espacements.
   Consommé par dashboard.css (@import) et les pages app.
   Préfixe --rc- pour éviter toute collision avec les variables
   locales des pages (la roue joueur garde ses variables
   personnalisables par commerçant : --primary, --wheel-*).
   ============================================================= */

:root {
    /* ── Marque ── */
    --rc-pink:   #E8306A;   /* primaire — actions, CTA, liens forts */
    --rc-navy:   #043351;   /* secondaire — titres, contours roue */
    --rc-yellow: #F4C400;   /* accent — highlights, podium */
    --rc-teal:   #1ABCB0;   /* accent secondaire — graphes, tags info */

    /* ── États ── */
    --rc-success: #2ECC71;
    --rc-warning: #F39C12;
    --rc-danger:  #E74C3C;

    /* ── Neutres ── */
    --rc-bg:      #F5F7FA;  /* fond de page */
    --rc-surface: #FFFFFF;  /* cartes, panneaux */
    --rc-text:    #1A2332;  /* texte principal */
    --rc-muted:   #7A8A9A;  /* texte secondaire */
    --rc-border:  #E8ECF0;  /* bordures, séparateurs */

    /* ── Dérivés (fonds pâles pour badges/alertes) ── */
    --rc-pink-soft:    #FDE8EF;
    --rc-success-soft: #E8F8F0;
    --rc-warning-soft: #FEF3E2;
    --rc-danger-soft:  #FDE8E8;
    --rc-teal-soft:    #E4F7F5;

    /* ── Typographie ──
       Poppins : titres, boutons, chiffres clés (identité Rocado).
       Stack système : corps de texte (perf, pas de fonte à charger). */
    --rc-font-heading: 'Poppins', -apple-system, 'Segoe UI', sans-serif;
    --rc-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* ── Géométrie ── */
    --rc-radius:    12px;
    --rc-radius-sm: 8px;
    --rc-radius-pill: 50px;
    --rc-shadow:    0 2px 10px rgba(4, 51, 81, 0.06);
    --rc-shadow-lg: 0 8px 30px rgba(4, 51, 81, 0.12);
}

/* ── Utilitaires génériques (opt-in) ── */
.rc-btn {
    font-family: var(--rc-font-heading);
    font-weight: 700;
    background: var(--rc-pink);
    color: #fff;
    border: none;
    border-radius: var(--rc-radius-sm);
    padding: 10px 20px;
    cursor: pointer;
    transition: opacity .15s;
}
.rc-btn:hover { opacity: .88; }
.rc-btn:disabled { opacity: .5; cursor: not-allowed; }
.rc-btn--secondary { background: var(--rc-navy); }
.rc-btn--ghost { background: transparent; color: var(--rc-pink); border: 1.5px solid var(--rc-pink); }

.rc-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--rc-radius-pill);
    font-size: .75rem;
    font-weight: 700;
}
.rc-badge--success { background: var(--rc-success-soft); color: #1E8449; }
.rc-badge--warning { background: var(--rc-warning-soft); color: #C87A0A; }
.rc-badge--danger  { background: var(--rc-danger-soft);  color: #C0392B; }
.rc-badge--info    { background: var(--rc-teal-soft);    color: #12897F; }