/*
 * ==========================================================
 * ALPHÉA SUITE — DESIGN CONTRACT 3.0
 * Contrat visuel commun des modules
 * ==========================================================
 *
 * Ce fichier contient uniquement les fondations communes :
 * couleurs, rayons, ombres, typographie fonctionnelle,
 * surfaces, boutons, formulaires, états et accessibilité.
 *
 * Les CSS métier des modules conservent leur structure.
 */

/* ALPHEA_DESIGN_CONTRACT_START */

:root {
    --alphea-ds-ink: #172b46;
    --alphea-ds-ink-strong: #10233c;
    --alphea-ds-ink-soft: #52637a;
    --alphea-ds-muted: #7d8999;
    --alphea-ds-muted-light: #9aa5b4;

    --alphea-ds-border: #e1e7ef;
    --alphea-ds-border-strong: #d4dde9;
    --alphea-ds-divider: #edf1f5;

    --alphea-ds-surface: #ffffff;
    --alphea-ds-surface-soft: #f7f9fc;
    --alphea-ds-surface-muted: #f1f5f9;
    --alphea-ds-surface-hover: #f8fafc;

    --alphea-ds-primary: #223f67;
    --alphea-ds-primary-hover: #172f51;
    --alphea-ds-primary-active: #102640;
    --alphea-ds-primary-soft: #eaf0f8;
    --alphea-ds-accent: #526fa9;

    --alphea-ds-info: #386a9f;
    --alphea-ds-info-soft: #eef5fc;

    --alphea-ds-success: #217a54;
    --alphea-ds-success-soft: #edf8f2;

    --alphea-ds-warning: #a56d19;
    --alphea-ds-warning-soft: #fff8e9;

    --alphea-ds-danger: #ae3e45;
    --alphea-ds-danger-soft: #fff3f4;

    --alphea-ds-purple: #7052a3;
    --alphea-ds-purple-soft: #f5f0fb;

    --alphea-ds-radius-xs: 8px;
    --alphea-ds-radius-sm: 11px;
    --alphea-ds-radius-md: 15px;
    --alphea-ds-radius-lg: 20px;
    --alphea-ds-radius-xl: 22px;
    --alphea-ds-radius-pill: 999px;

    --alphea-ds-shadow-xs:
        0 3px 10px rgba(19, 39, 67, .035);

    --alphea-ds-shadow-sm:
        0 6px 18px rgba(19, 39, 67, .045);

    --alphea-ds-shadow-md:
        0 14px 38px rgba(19, 39, 67, .075);

    --alphea-ds-shadow-lg:
        0 18px 46px rgba(18, 39, 68, .15);

    --alphea-ds-focus:
        0 0 0 3px rgba(82, 111, 169, .16);

    --alphea-ds-transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease,
        color .18s ease,
        transform .18s ease,
        opacity .18s ease;

    --alphea-ds-content-gap: 20px;
    --alphea-ds-card-padding: 18px;
    --alphea-ds-field-height: 42px;
    --alphea-ds-button-height: 38px;
}

/* Thème sombre : fondations sans imposer la mise en page. */

html[data-alphea-theme="dark"] {
    --alphea-ds-ink: #e5edf7;
    --alphea-ds-ink-strong: #f6f9fc;
    --alphea-ds-ink-soft: #b9c5d4;
    --alphea-ds-muted: #8f9daf;
    --alphea-ds-muted-light: #738196;

    --alphea-ds-border: #29384b;
    --alphea-ds-border-strong: #35475e;
    --alphea-ds-divider: #263548;

    --alphea-ds-surface: #162235;
    --alphea-ds-surface-soft: #111d2d;
    --alphea-ds-surface-muted: #1b293d;
    --alphea-ds-surface-hover: #1d2d43;

    --alphea-ds-primary: #7f9dca;
    --alphea-ds-primary-hover: #9bb4d8;
    --alphea-ds-primary-active: #b6c9e2;
    --alphea-ds-primary-soft: #223653;
    --alphea-ds-accent: #91a9d0;

    --alphea-ds-info: #7dacdc;
    --alphea-ds-info-soft: #1d354d;

    --alphea-ds-success: #6fc49a;
    --alphea-ds-success-soft: #17382d;

    --alphea-ds-warning: #e0ae61;
    --alphea-ds-warning-soft: #3a2c16;

    --alphea-ds-danger: #e7878c;
    --alphea-ds-danger-soft: #3b2025;

    --alphea-ds-purple: #b69bdd;
    --alphea-ds-purple-soft: #312742;
}

/*
 * Classes utilitaires communes.
 * Elles pourront progressivement remplacer les styles internes.
 */

.alphea-ds-stack {
    display: grid;
    gap: var(--alphea-ds-content-gap);
}

.alphea-ds-surface {
    border: 1px solid var(--alphea-ds-border);
    border-radius: var(--alphea-ds-radius-lg);
    color: var(--alphea-ds-ink);
    background: var(--alphea-ds-surface);
    box-shadow: var(--alphea-ds-shadow-sm);
}

.alphea-ds-surface--soft {
    background: var(--alphea-ds-surface-soft);
}

.alphea-ds-eyebrow {
    color: var(--alphea-ds-accent);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.alphea-ds-muted {
    color: var(--alphea-ds-muted);
}

.alphea-ds-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: var(--alphea-ds-button-height);
    padding: 0 13px;
    border: 1px solid var(--alphea-ds-border-strong);
    border-radius: var(--alphea-ds-radius-sm);
    color: var(--alphea-ds-primary);
    background: var(--alphea-ds-surface);
    font-size: 10px;
    font-weight: 820;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: var(--alphea-ds-transition);
}

.alphea-ds-button:hover {
    border-color: #b9c6d7;
    color: var(--alphea-ds-primary-hover);
    background: var(--alphea-ds-primary-soft);
    box-shadow: var(--alphea-ds-shadow-sm);
    transform: translateY(-1px);
}

.alphea-ds-button--primary {
    border-color: var(--alphea-ds-primary);
    color: #fff;
    background: var(--alphea-ds-primary);
}

.alphea-ds-button--primary:hover {
    border-color: var(--alphea-ds-primary-hover);
    color: #fff;
    background: var(--alphea-ds-primary-hover);
}

.alphea-ds-button--danger {
    border-color: color-mix(
        in srgb,
        var(--alphea-ds-danger) 30%,
        transparent
    );
    color: var(--alphea-ds-danger);
    background: var(--alphea-ds-danger-soft);
}

.alphea-ds-field {
    width: 100%;
    min-height: var(--alphea-ds-field-height);
    border: 1px solid var(--alphea-ds-border-strong);
    border-radius: var(--alphea-ds-radius-sm);
    color: var(--alphea-ds-ink);
    background: var(--alphea-ds-surface);
    transition: var(--alphea-ds-transition);
}

.alphea-ds-field:focus {
    outline: none;
    border-color: var(--alphea-ds-accent);
    box-shadow: var(--alphea-ds-focus);
}

.alphea-ds-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 0 9px;
    border: 1px solid var(--alphea-ds-border);
    border-radius: var(--alphea-ds-radius-pill);
    color: var(--alphea-ds-ink-soft);
    background: var(--alphea-ds-surface-soft);
    font-size: 8px;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

.alphea-ds-empty {
    padding: 26px;
    border: 1px dashed var(--alphea-ds-border-strong);
    border-radius: var(--alphea-ds-radius-md);
    color: var(--alphea-ds-muted);
    background: var(--alphea-ds-surface-soft);
    text-align: center;
}

/* Accessibilité globale. */

.alphea-ds-button:focus-visible,
.alphea-ds-field:focus-visible,
.alphea-ds-surface a:focus-visible,
.alphea-ds-surface button:focus-visible {
    outline: 3px solid rgba(82, 111, 169, .23);
    outline-offset: 2px;
}

/* Réduction des animations selon le réglage du système. */

@media (prefers-reduced-motion: reduce) {
    .alphea-ds-button,
    .alphea-ds-field,
    .alphea-ds-surface {
        scroll-behavior: auto;
        transition: none;
    }
}

/* ALPHEA_DESIGN_CONTRACT_END */