/* Variables de design — reprises des maquettes Figma (variables Sombre / Clair). */

@font-face {
    font-family: "Archivo Black";
    src: url("../fonts/archivo-black-ikuQ_if.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-800-azPz4j7.woff2") format("woff2");
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: "DM Sans";
    src: url("../fonts/dm-sans-UixWzrV.woff2") format("woff2");
    font-weight: 100 1000;
    font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono-zjT1pI9.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

:root {
    /* Couleurs — thème sombre (par défaut) */
    --bg: #0d0d0d;
    --surface: #1a1a1a;
    --border: #333333;
    --text: #f2f2f2;
    --text-muted: #a3a3a3;
    --accent: #da315a;
    --accent-hover: #c02a4e;
    --accent-text: #f0647f; /* rose éclairci : petit texte lisible sur fond sombre */
    --on-accent: #ffffff;

    /* Typographie */
    --font-display: "Archivo Black", "Archivo", system-ui, sans-serif;
    --font-heading: "Archivo", "Archivo Black", system-ui, sans-serif;
    --font-body: "DM Sans", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;

    /* Espacements */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 120px;

    /* Formes */
    --radius-pill: 999px;
    --radius-card: 16px;
    --photo-radius: 0px; /* coins des photos : 0 = droits (comme un tirage) ; essaie 4px ou 12px si tu préfères arrondi */
    --radius-field: 12px;

    /* Mise en page */
    --container: 1440px;
    --gutter: 64px;

    /* Mouvement */
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --duration: 200ms;

    color-scheme: dark;
}

:root[data-theme="light"] {
    --bg: #f2f2f2;
    --surface: #ffffff;
    --border: #d9d9d9;
    --text: #0d0d0d;
    --text-muted: #5c5c5c;
    --accent-text: #c4244d; /* rose plus foncé : 5:1 sur le fond clair (le #da315a n’atteint que 4,1:1, sous le seuil AA de 4,5:1) */

    color-scheme: light;
}

@media (max-width: 800px) {
    :root {
        --gutter: 20px;
        --space-9: 72px;
    }
}