/**
 * Koosgo — Socle de la charte graphique (Guide d'identité visuelle, oct. 2026)
 * ------------------------------------------------------------------
 * Chargé sur TOUTES les pages (application, authentification, landing).
 *   - Police d'accompagnement : Rubik (auto-hébergée, licence OFL)
 *   - Palette : Vert #0E6F56 (principale) · Doré #EF9F25 (accent)
 *               Noir #1D1D1B (textes) · Blanc #FFFFFF (dominant)
 *   - Hiérarchie : Titre Rubik Bold 32 · Intertitre Rubik Bold 20 · Texte Rubik Regular 16
 * Le logo conserve son lettrage d'origine : utiliser les fichiers de
 * public/assets/images/brand/, jamais une reproduction en texte.
 * ------------------------------------------------------------------ */

/* ===================== Police Rubik ===================== */
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 300 400; font-display: swap; src: url("../fonts/rubik/Rubik-Regular.woff") format("woff"); }
@font-face { font-family: "Rubik"; font-style: italic; font-weight: 300 400; font-display: swap; src: url("../fonts/rubik/Rubik-Italic.woff") format("woff"); }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 500;     font-display: swap; src: url("../fonts/rubik/Rubik-Medium.woff") format("woff"); }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 600;     font-display: swap; src: url("../fonts/rubik/Rubik-SemiBold.woff") format("woff"); }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 700;     font-display: swap; src: url("../fonts/rubik/Rubik-Bold.woff") format("woff"); }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 800 900; font-display: swap; src: url("../fonts/rubik/Rubik-ExtraBold.woff") format("woff"); }

/* ===================== Jetons de couleur ===================== */
:root {
    --kg-green:        #0E6F56;  /* couleur principale */
    --kg-green-900:    #063A2D;
    --kg-green-800:    #08493A;
    --kg-green-700:    #0B5A46;  /* survol / pressé */
    --kg-green-500:    #148066;
    --kg-green-400:    #3C9A80;
    --kg-green-300:    #7BBDA9;
    --kg-green-200:    #A9D4C6;
    --kg-green-100:    #D3EAE2;
    --kg-green-50:     #EAF5F1;
    --kg-green-25:     #F2F8F6;

    --kg-gold:         #EF9F25;  /* accent : ponctue les détails */
    --kg-gold-light:   #F8B133;
    --kg-gold-600:     #D6861A;
    --kg-gold-700:     #B06A10;  /* doré lisible sur fond blanc */
    --kg-gold-100:     #FDF0DB;
    --kg-gold-50:      #FEF8EE;

    --kg-ink:          #1D1D1B;  /* textes et monochrome */
    --kg-ink-soft:     #4A4A47;
    --kg-muted:        #6B6B67;
    --kg-line:         #E3E8E6;
    --kg-white:        #FFFFFF;  /* fonds et réserves */
    --kg-surface:      #F6F8F7;

    --kg-font:         "Rubik", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --kg-radius:       10px;
    --kg-focus-ring:   0 0 0 3px rgba(14, 111, 86, 0.18);

    /* Variables héritées (design-improvements.css) réalignées sur la charte */
    --primary:       #0E6F56;
    --primary-dark:  #0B5A46;
    --primary-light: #A9D4C6;
    --accent:        #EF9F25;
    --accent-dark:   #D6861A;
    --accent-light:  #FDF0DB;
}

/* ===================== Typographie ===================== */
html, body,
button, input, select, optgroup, textarea,
.tooltip, .popover, .dropdown-menu, .modal, .toast,
.font-sans, .select2-container, .selectize-control, .flatpickr-calendar {
    font-family: var(--kg-font) !important;
}


h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--kg-font);
}

::selection { background: var(--kg-gold-100); color: var(--kg-ink); }

a { color: var(--kg-green); }
a:hover { color: var(--kg-green-700); }

:focus-visible { outline: 2px solid var(--kg-green); outline-offset: 2px; }

/* ===================== Utilitaires de marque ===================== */
.text-brand      { color: var(--kg-green) !important; }
.text-brand-gold { color: var(--kg-gold-700) !important; }
.text-ink        { color: var(--kg-ink) !important; }
.bg-brand        { background-color: var(--kg-green) !important; color: #fff; }
.bg-brand-soft   { background-color: var(--kg-green-50) !important; }
.bg-brand-gold   { background-color: var(--kg-gold) !important; color: var(--kg-ink); }
.bg-brand-gold-soft { background-color: var(--kg-gold-50) !important; }
.border-brand    { border-color: var(--kg-green) !important; }

.kg-logo { display: inline-block; height: 32px; width: auto; }
.kg-logo--lg { height: 48px; }
.kg-logo--sm { height: 24px; }

/* ===================== Classes Tailwind (pages Jetstream / landing) ===================== */
.text-green-500, .text-green-600, .text-emerald-500, .text-emerald-600, .text-teal-600 { color: var(--kg-green) !important; }
.text-green-700, .text-green-800, .text-emerald-700, .text-emerald-800, .text-teal-700, .text-teal-800 { color: var(--kg-green-800) !important; }
.text-emerald-400, .text-green-400 { color: var(--kg-green-300) !important; }
.text-emerald-100, .text-emerald-50, .text-green-100 { color: var(--kg-green-100) !important; }
.bg-green-500, .bg-green-600, .bg-emerald-500, .bg-emerald-600, .bg-teal-500, .bg-teal-600 { background-color: var(--kg-green) !important; }
.bg-green-700, .bg-emerald-700, .bg-teal-700 { background-color: var(--kg-green-700) !important; }
.bg-green-50, .bg-emerald-50, .bg-teal-50 { background-color: var(--kg-green-25) !important; }
.bg-green-100, .bg-emerald-100, .bg-teal-100 { background-color: var(--kg-green-100) !important; }
.border-green-400, .border-green-500, .border-emerald-500, .border-teal-500 { border-color: var(--kg-green) !important; }
.hover\:text-emerald-600:hover, .hover\:text-green-600:hover { color: var(--kg-green) !important; }
.hover\:bg-emerald-700:hover, .hover\:bg-green-700:hover { background-color: var(--kg-green-700) !important; }
.from-emerald-500, .from-emerald-600, .from-green-500, .from-green-600, .from-teal-500 {
    --tw-gradient-from: #0E6F56 !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(14, 111, 86, 0)) !important;
}
.to-emerald-600, .to-emerald-700, .to-green-600, .to-green-700, .to-teal-600, .to-teal-700 { --tw-gradient-to: #0B5A46 !important; }
.text-indigo-600, .text-purple-600 { color: var(--kg-green) !important; }
.bg-indigo-600, .bg-purple-600 { background-color: var(--kg-green) !important; }
.bg-purple-700, .bg-indigo-700 { background-color: var(--kg-green-700) !important; }
.bg-indigo-100, .bg-purple-100 { background-color: var(--kg-green-100) !important; }
.text-indigo-700, .text-indigo-800 { color: var(--kg-green-800) !important; }
.text-yellow-500, .text-amber-500 { color: var(--kg-gold) !important; }
.bg-yellow-500, .bg-amber-500 { background-color: var(--kg-gold) !important; }
.focus\:ring-indigo-500:focus, .focus\:border-indigo-300:focus { --tw-ring-color: rgba(14, 111, 86, .35) !important; border-color: var(--kg-green-300) !important; }