/*
 * Mon espace social — jetons de la charte et polices.
 *
 * Source unique des couleurs, polices, espacements et arrondis.
 * Chargé par nos pages (avant mes.css) et par mes-app.css (pages MiroTalk).
 * Pour changer l'apparence du site, commencer ici.
 */

/* ---------- 1. Jetons de la charte ---------- */
:root {
    /* Couleurs */
    --surface: #f5f7fa; /* fond de page */
    --surface-raised: #ffffff; /* cartes, en-tête, champs */
    --surface-sunken: #eaeff5;
    --line: #d9e0ea; /* filets décoratifs */
    --line-strong: #6b7a90; /* bordures de champs et boutons secondaires */
    --ink: #14213d; /* texte principal */
    --ink-muted: #4a5872; /* texte secondaire */
    --blue: #1f4e9c; /* couleur de marque : actions, liens */
    --blue-strong: #173d7a; /* survol */
    --blue-soft: #e8effa; /* fond teinté derrière du texte bleu */
    --on-blue: #ffffff;
    --coral: #f28c6b; /* accent humain, < 5 % de l'écran, jamais en texte sur fond clair */
    --coral-soft: #fdede7;
    --coral-ink: #9a3b1c;
    --sage: #23704f; /* « protégé », « confirmé » */
    --sage-soft: #e3f2ea;
    --alert: #b3261e;
    --alert-soft: #fbe9e7;
    --night: #14213d; /* aplats sombres */
    --night-deep: #0f1a30; /* pied de page */
    --night-line: #3a5488; /* filets sur aplat sombre */
    --night-text: #c9d3e4; /* texte secondaire sur aplat sombre */
    --focus-ring: #1f4e9c;

    /* Typographie */
    --font-text: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: var(--font-text);

    /* Espacements */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* Arrondis et ombres */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --shadow-card: 0 1px 2px rgba(20, 33, 61, 0.06), 0 4px 16px rgba(20, 33, 61, 0.06);
    --shadow-pop: 0 12px 32px rgba(20, 33, 61, 0.16);

    /* Mise en page */
    --content-width: 1120px;
    --gutter: var(--space-6);
}

@media (max-width: 640px) {
    :root {
        --gutter: var(--space-4);
    }
}

/* ---------- 2. Polices ---------- */
@font-face {
    font-family: 'Public Sans';
    src: url('../fonts/PublicSans-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Public Sans';
    src: url('../fonts/PublicSans-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Public Sans';
    src: url('../fonts/PublicSans-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Public Sans';
    src: url('../fonts/PublicSans-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}