/* ============================================================
   Traame — Brand tokens
   ============================================================
   Palette identitaire livrée par le graphiste (5 couleurs).
   Ces tokens sont EXPOSÉS mais n'écrasent PAS les rôles
   sémantiques (--primary-color, --color-success, etc.) tant
   que le graphiste n'a pas confirmé le mapping.
   Utiliser les --brand-* pour les surfaces *identitaires*
   (logo, landing, footer "powered by", élements déco) et les
   --color-* / --primary-* pour la sémantique UI (boutons,
   alerts, états) inchangés.
   ============================================================ */
:root {
    /* Palette Traame */
    --brand-green: #29a649;
    --brand-red: #d94f41;
    --brand-coral: #f27649;
    --brand-orange: #f29220;
    --brand-yellow: #f2ae2c;

    /* Nuances neutres identitaires (utilisées par les logos et pictos) */
    --brand-ink: #1a1a2e;          /* texte sur fond clair */
    --brand-paper: #ffffff;        /* fond clair identitaire */

    /* Gradients brand — utilisables pour hero, cards identitaires */
    --brand-gradient-warm: linear-gradient(135deg, var(--brand-yellow) 0%, var(--brand-coral) 100%);
    --brand-gradient-rainbow: linear-gradient(
        90deg,
        var(--brand-green) 0%,
        var(--brand-yellow) 25%,
        var(--brand-orange) 50%,
        var(--brand-coral) 75%,
        var(--brand-red) 100%
    );
}

/* Helpers réutilisables — les utiliser plutôt que de rehardcoder la couleur */
.brand-accent-green  { color: var(--brand-green); }
.brand-accent-red    { color: var(--brand-red); }
.brand-accent-coral  { color: var(--brand-coral); }
.brand-accent-orange { color: var(--brand-orange); }
.brand-accent-yellow { color: var(--brand-yellow); }

/* Bandeau identitaire : ligne fine multicolore (landing, footer) */
.brand-rainbow-bar {
    height: 4px;
    background: var(--brand-gradient-rainbow);
    width: 100%;
    border-radius: 2px;
}

/* Logo container — garantit une taille consistente */
.brand-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.brand-logo svg,
.brand-logo img {
    display: block;
    height: 32px;   /* taille par défaut; overridable via .brand-logo--lg etc. */
    width: auto;
}
.brand-logo--sm svg, .brand-logo--sm img { height: 24px; }
.brand-logo--lg svg, .brand-logo--lg img { height: 48px; }
.brand-logo--xl svg, .brand-logo--xl img { height: 96px; }

/* Login / signup / auth pages — "powered by Traame" footer line */
.login-powered-by {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.25rem;
    opacity: 0.75;
}
.login-brand-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

/* Pictos monochromes (24×24 viewBox) — héritent currentColor */
.brand-picto {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: middle;
}
.brand-picto svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}
.brand-picto--sm { width: 1rem; height: 1rem; }
.brand-picto--lg { width: 1.5rem; height: 1.5rem; }
.brand-picto--xl { width: 2rem; height: 2rem; }