/* Dev TTFL — base.css */
@layer base {
    body {
        background: var(--bg);
        color: var(--text);
        font-family: var(--font-ui);
        /* ← utilise la pile centralisée */
        font-size: var(--font-m);
        line-height: 1.5;
        font-weight: 400;
        /* optionnel (400 est la valeur par défaut) */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    h1,
    h2 {
        font-family: var(--font-display);
        letter-spacing: .01em;
    }

    .font-display {
        font-family: var(--font-display);
        letter-spacing: .01em;
    }

    .numeric {
        font-variant-numeric: tabular-nums lining-nums;
    }

    /* Liens */
    a {
        color: var(--link);
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    /* Conteneurs */
    .container {
        width: min(100% - 2rem, 520px);
        margin-inline: auto;
        padding: var(--space-4);
    }

    .container--max {
        width: min(100% - 1rem, var(--container-max));
        margin-inline: auto;
    }

    /* Accessibilité globale (ex-a11y.css) */
    a:focus-visible,
    button:focus-visible,
    [role="button"]:focus-visible,
    [tabindex]:not([tabindex="-1"]):focus-visible {
        outline: 2px solid var(--brand);
        outline-offset: 2px;
        border-radius: var(--radius);
    }

    /* Skip link générique (utilisé sur Login) */
    .skip-link {
        position: absolute;
        left: -9999px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    .skip-link:focus {
        position: fixed;
        left: 12px;
        top: 12px;
        padding: 8px 12px;
        background: #fff;
        color: #000;
        border-radius: 8px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
        z-index: 9999;
    }
}