/* ============================================================
   TYPO.CSS — Systeme typographique Solid Carrelage
   ============================================================
   3 polices  : Inter (body), Raleway (titres), Poppins (UI admin)
   8 tailles  : xs, sm, base, md, lg, xl, 2xl, 3xl
   6 graisses : 400, 500, 600, 700, 800, 900
   ============================================================ */

/* --- Google Fonts ------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Poppins:wght@400;500;600;700;800;900&family=Raleway:wght@400;500;600;700;800;900&display=swap');

/* --- Variables --------------------------------------------- */
:root {
    /* Polices */
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;
    --font-heading: 'Raleway', system-ui, -apple-system, sans-serif;
    --font-ui:      'Poppins', system-ui, -apple-system, sans-serif;

    /* Tailles */
    --text-xs:   0.75rem;   /* 12px — badges, labels discrets */
    --text-sm:   0.875rem;  /* 14px — texte secondaire, hints */
    --text-base: 1rem;      /* 16px — body, boutons, inputs */
    --text-md:   1.125rem;  /* 18px — sous-titres, lead text */
    --text-lg:   1.5rem;    /* 24px — titres de cartes, h3 */
    --text-xl:   2rem;      /* 32px — titres de section, h2 */
    --text-2xl:  2.5rem;    /* 40px — titres de page, h1 */
    --text-3xl:  3rem;      /* 48px — hero, stats, KPI */

    /* Graisses */
    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;
    --fw-extrabold: 800;
    --fw-black:     900;

    /* Interligne */
    --leading-tight:  1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;
}

/* --- Base -------------------------------------------------- */
body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--fw-regular);
    line-height: var(--leading-normal);
}

/* --- Headings ---------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: var(--leading-tight);
}

h1 {
    font-size: var(--text-2xl);
    font-weight: var(--fw-black);
}

h2 {
    font-size: var(--text-xl);
    font-weight: var(--fw-extrabold);
}

h3 {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
}

h4 {
    font-size: var(--text-md);
    font-weight: var(--fw-semibold);
}

h5 {
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
}

h6 {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
}

/* --- Classes utilitaires — Tailles ------------------------- */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

/* --- Classes utilitaires — Graisses ------------------------ */
.fw-regular   { font-weight: var(--fw-regular); }
.fw-medium    { font-weight: var(--fw-medium); }
.fw-semibold  { font-weight: var(--fw-semibold); }
.fw-bold      { font-weight: var(--fw-bold); }
.fw-extrabold { font-weight: var(--fw-extrabold); }
.fw-black     { font-weight: var(--fw-black); }

/* --- Classes utilitaires — Polices ------------------------- */
.font-body    { font-family: var(--font-body); }
.font-heading { font-family: var(--font-heading); }
.font-ui      { font-family: var(--font-ui); }

/* --- Responsive -------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --text-lg:  1.25rem;  /* 20px */
        --text-xl:  1.75rem;  /* 28px */
        --text-2xl: 2rem;     /* 32px */
        --text-3xl: 2.5rem;   /* 40px */
    }
}

@media (max-width: 480px) {
    :root {
        --text-lg:  1.125rem; /* 18px */
        --text-xl:  1.5rem;   /* 24px */
        --text-2xl: 1.75rem;  /* 28px */
        --text-3xl: 2rem;     /* 32px */
    }
}