/*
 Theme Name:   Astra Child Karchario
 Theme URI:    https://karchar.io
 Description:  Thème enfant d'Astra pour Karchario. Charge la typographie
               Bricolage Grotesque et applique les couleurs de la marque.
 Author:       Thomas Delage
 Template:     astra
 Version:      1.0.0
 Text Domain:  astra-child-karchario
*/

/* ------------------------------------------------------------------
   Variables de marque Karchario
   (le mint #70FFE8 fait foi — issu du logo officiel)
   ------------------------------------------------------------------ */
:root {
    --kar-navy:    #0A122B; /* texte principal, fonds sombres */
    --kar-slate:   #3A6A82; /* texte secondaire, accents */
    --kar-teal:    #3E8E9C; /* accent intermédiaire */
    --kar-mint:    #70FFE8; /* accent, CTA, survols */
    --kar-cream:   #F5F1EA; /* fond clair alternatif */
    --kar-white:   #FFFFFF;
}

/* ------------------------------------------------------------------
   Typographie — Bricolage Grotesque
   (la police est chargée via functions.php)
   ------------------------------------------------------------------ */
body,
button,
input,
select,
textarea,
.ast-container {
    font-family: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--kar-navy);
}

/* ------------------------------------------------------------------
   Boutons — mint sur navy, survol teal
   ------------------------------------------------------------------ */
.ast-button,
.button,
button,
.wp-block-button__link,
input[type="submit"],
.wpcf7-submit {
    background-color: var(--kar-mint);
    color: var(--kar-navy);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.ast-button:hover,
.button:hover,
button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
.wpcf7-submit:hover {
    background-color: var(--kar-teal);
    color: var(--kar-white);
    transform: translateY(-1px);
}

/* ------------------------------------------------------------------
   Liens
   ------------------------------------------------------------------ */
a {
    color: var(--kar-slate);
    transition: color 0.2s ease;
}
a:hover {
    color: var(--kar-navy);
}

/* ------------------------------------------------------------------
   Sections sombres (utilitaire .kar-section-dark)
   À appliquer sur footer / sections navy. Le logo clair s'y place.
   ------------------------------------------------------------------ */
.kar-section-dark {
    background-color: var(--kar-navy);
    color: var(--kar-white);
}
.kar-section-dark h1,
.kar-section-dark h2,
.kar-section-dark h3,
.kar-section-dark h4 {
    color: var(--kar-white);
}
.kar-section-dark a {
    color: var(--kar-mint);
}
.kar-section-dark a:hover {
    color: var(--kar-white);
}

/* Accent mint réutilisable */
.kar-accent { color: var(--kar-mint); }