/*
 * FlexIAbility CRM — jetons de design.
 * Source et règles d'usage : docs/DESIGN.md. Composants : app/static/css/app.css.
 * Ce fichier ne contient que des variables : aucun sélecteur de composant.
 *
 * Polices (à charger dans le <head>) :
 * https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Sora:wght@600;700&display=swap
 */

:root {
  color-scheme: light;

  /* --- Palette de marque (relevée sur flexiability.com) --- */
  --brand-plum-900: #221327;   /* prune très foncée : barre latérale, texte fort */
  --brand-plum-800: #2B1A31;   /* prune surface : encart de la barre latérale */
  --brand-plum-750: #3A2440;   /* lien actif de la barre latérale (dérivé) */
  --brand-plum-700: #4A2F48;   /* bordure sur fond prune */
  --brand-plum-600: #714B67;   /* prune Odoo : liens, barre d'étapes, badge Claude */
  --brand-plum-400: #9A7590;   /* mauve : compteurs discrets */
  --brand-plum-200: #C9BFD0;   /* lilas doux : texte secondaire sur prune */
  --brand-plum-100: #F1ECF0;   /* lilas clair : fonds de zone, puces */
  --brand-plum-50:  #F8F5F7;   /* lilas très clair (dérivé) : fond d'application */
  --brand-cream:    #FBFAF7;   /* blanc cassé */
  --brand-amber:    #F5A524;   /* ambre : action principale UNIQUEMENT */
  --brand-amber-600:#DB8F14;   /* ambre survol (dérivé) */

  /* --- Surfaces --- */
  --bg-app:        var(--brand-plum-50);
  --bg-surface:    #FFFFFF;
  --bg-subtle:     var(--brand-plum-100);
  --bg-hover:      #F3EEF2;
  --bg-dark:       var(--brand-plum-900);     /* bouton « Ouvrir dans Claude », « Marquer fait » */
  --bg-dark-hover: var(--brand-plum-750);
  --bg-sidebar:    var(--brand-plum-900);
  --bg-sidebar-active: var(--brand-plum-750);
  --bg-sidebar-card:   var(--brand-plum-800);

  /* --- Texte --- */
  --text-strong:   var(--brand-plum-900);
  --text:          #4A3A50;
  --text-muted:    #5B4A61;
  --text-faint:    var(--brand-plum-400);
  --text-on-dark:  var(--brand-cream);
  --text-on-dark-muted: var(--brand-plum-200);
  --text-on-accent: var(--brand-plum-900);
  --text-link:     var(--brand-plum-600);

  /* --- Bordures --- */
  --border:        #E7E0E6;
  --border-soft:   #EDE7EC;   /* séparateurs internes (historique, tableaux) */
  --border-strong: #C9BFD0;   /* champs de saisie, pointillés */
  --border-subtle: #DCCFD8;   /* contour des zones lilas */
  --border-sidebar: var(--brand-plum-700);

  /* --- Accent (ambre) --- */
  --accent:        var(--brand-amber);
  --accent-hover:  var(--brand-amber-600);
  --focus-ring:    0 0 0 2px var(--bg-surface), 0 0 0 4px var(--brand-amber);

  /* --- États (ajoutés : absents du site) --- */
  --success:        #1F6B45;
  --success-bg:     #E8F3EC;
  --danger:         #B42318;
  --danger-bg:      #FDECEA;
  --danger-border:  #F3C7C2;
  --relance:        #7A5200;   /* ocre « à relancer » — distinct de l'ambre */
  --relance-bg:     #FFF6E0;
  --relance-border: #F0D58C;

  /* --- État sélectionné (pastilles, filtres, types, étapes) : doit sauter aux yeux --- */
  --selected-bg:     var(--brand-plum-600);
  --selected-fg:     #FFFFFF;
  --selected-border: var(--brand-plum-600);
  --unselected-border: var(--border-strong);

  /* --- Badge « Ajouté par Claude » --- */
  --claude:        var(--brand-plum-600);
  --claude-bg:     var(--brand-plum-100);

  /* --- Typographie --- */
  /* Barre d'étapes / de statut des fiches */
  --step-done-bg:    var(--brand-plum-600);  --step-done-fg:    var(--brand-cream);
  --step-current-bg: var(--brand-plum-900);  --step-current-fg: var(--brand-amber);
  /* --- Objets (docs/maquettes/fiches-v3/FICHES.md §1) : texte, fond, liseré, aplat (pastille pleine) --- */
  --obj-deal:          #7A5200;  --obj-deal-bg:       #FFF1D1;  --obj-deal-line:       #F5A524;  --obj-deal-solid:       #7A5200;
  --obj-company:       #714B67;  --obj-company-bg:    #F1ECF0;  --obj-company-line:    #714B67;  --obj-company-solid:    #714B67;
  --obj-contact:       #2B5F7A;  --obj-contact-bg:    #E6F0F5;  --obj-contact-line:    #2B5F7A;  --obj-contact-solid:    #2B5F7A;
  --obj-quote:         #1F6B45;  --obj-quote-bg:      #E8F3EC;  --obj-quote-line:      #1F6B45;  --obj-quote-solid:      #1F6B45;
  --obj-consultant:    #4A4E9C;  --obj-consultant-bg: #ECEDF8;  --obj-consultant-line: #4A4E9C;  --obj-consultant-solid: #4A4E9C;
  --obj-lead:          #A12D62;  --obj-lead-bg:       #FCE8F0;  --obj-lead-line:       #C2407A;  --obj-lead-solid:       #A12D62;
  --linkedin:          #0A66C2;  --linkedin-bg:       #E8F1FA;      /* activités et statut LinkedIn */

  --font-display:  "Sora", system-ui, sans-serif;
  --font-body:     "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-2xs:  11px;   /* badges */
  --fs-xs:   12px;   /* dates, libellés d'encart */
  --fs-sm:   13px;   /* texte secondaire, tableaux de propriétés */
  --fs-base: 14px;   /* texte courant */
  --fs-lg:   16px;   /* titres de section, prochaine étape */
  --fs-xl:   20px;   /* marque */
  --fs-2xl:  26px;   /* montant du deal en cours */
  --fs-3xl:  28px;   /* titre de page, chiffres clés */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-display: 700;

  --lh-tight: 1.2;
  --lh-base:  1.5;
  --ls-display: -0.03em;
  --ls-label:   0.04em;

  /* --- Espacements (grille de 4 px) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;

  /* --- Arrondis --- */
  --radius-sm:   6px;    /* bandeau, étiquette de type */
  --radius:      8px;    /* petits boutons, liens de navigation */
  --radius-md:   10px;   /* carte deal, champs */
  --radius-lg:   12px;   /* chiffres clés, tâches */
  --radius-xl:   14px;   /* encarts des fiches */
  --radius-pill: 999px;  /* boutons principaux, badges, filtres */

  /* --- Ombres (légères sur fond clair) --- */
  --shadow-xs:   0 1px 2px rgba(34, 19, 39, 0.06);
  --shadow-drag: 0 8px 20px rgba(10, 4, 12, 0.18);   /* carte en cours de glissement */
  --shadow-pop:  0 24px 48px rgba(10, 4, 12, 0.20);  /* fenêtres de confirmation */

  /* --- Dimensions --- */
  --control-h:     44px;   /* cible tactile des actions principales */
  --control-h-sm:  36px;   /* filtres, boutons de ligne */
  --sidebar-w:     232px;
  --kanban-col-min: 230px;
}

/*
 * Mode sombre : variables posées, non peaufiné (voir DESIGN.md).
 * Désactivable en forçant data-theme="light" sur <html>.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-app:        #170C1A;
    --bg-surface:    #221327;
    --bg-subtle:     #2B1A31;
    --bg-hover:      #33203A;
    --bg-sidebar:    #120914;
    --bg-sidebar-active: #2B1A31;
    --bg-sidebar-card:   #1C0F20;

    --text-strong:   #FBFAF7;
    --text:          #E6DEE8;
    --text-muted:    #B3A6B8;
    --text-faint:    #85778B;
    --text-link:     #D9B6CF;

    --border:        #3A2741;
    --border-soft:   #33213A;
    --border-strong: #4A2F48;
    --border-subtle: #4A2F48;

    --success:        #4CC38A;
    --success-bg:     #16301F;
    --danger:         #F07A6E;
    --danger-bg:      #3A1A18;
    --danger-border:  #6A2A24;
    --relance:        #E0B25A;
    --relance-bg:     #3A2C12;
    --relance-border: #5C4718;

    --claude:        #D9B6CF;
    --claude-bg:     #3A2440;

    /* Boutons prunes : plus clairs que les cartes, sinon ils s'y fondent */
    --bg-dark:       #6B4766;
    --bg-dark-hover: #7D5577;
    --selected-bg:     #E7C8DD;
    --selected-fg:     #221327;
    --selected-border: #E7C8DD;
    --unselected-border: #6E5576;

    --step-done-bg:    #4A2F48;  --step-done-fg:    #E6DEE8;
    --step-current-bg: #F5A524;  --step-current-fg: #221327;
    /* Objets : texte plus clair, fond foncé teinté, aplat moyen (icône blanche lisible) */
    --obj-deal:          #E0B25A;  --obj-deal-bg:       #3A2C12;  --obj-deal-line:       #F5A524;  --obj-deal-solid:       #8A6417;
    --obj-company:       #D9B6CF;  --obj-company-bg:    #3A2440;  --obj-company-line:    #9A7590;  --obj-company-solid:    #8A5E7E;
    --obj-contact:       #8CC3DE;  --obj-contact-bg:    #15303D;  --obj-contact-line:    #4F8FB0;  --obj-contact-solid:    #3C7896;
    --obj-quote:         #4CC38A;  --obj-quote-bg:      #16301F;  --obj-quote-line:      #3A9A6A;  --obj-quote-solid:      #2E7F55;
    --obj-consultant:    #A9ADEB;  --obj-consultant-bg: #23254A;  --obj-consultant-line: #6C71C4;  --obj-consultant-solid: #5A5FB0;
    --obj-lead:          #F28DB8;  --obj-lead-bg:       #3B1A28;  --obj-lead-line:       #C2407A;  --obj-lead-solid:       #B03A6E;
    --linkedin:          #70B5F9;  --linkedin-bg:       #14283D;

    --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg-app:        #170C1A;
    --bg-surface:    #221327;
    --bg-subtle:     #2B1A31;
    --bg-hover:      #33203A;
    --bg-sidebar:    #120914;
    --bg-sidebar-active: #2B1A31;
    --bg-sidebar-card:   #1C0F20;

    --text-strong:   #FBFAF7;
    --text:          #E6DEE8;
    --text-muted:    #B3A6B8;
    --text-faint:    #85778B;
    --text-link:     #D9B6CF;

    --border:        #3A2741;
    --border-soft:   #33213A;
    --border-strong: #4A2F48;
    --border-subtle: #4A2F48;

    --success:        #4CC38A;
    --success-bg:     #16301F;
    --danger:         #F07A6E;
    --danger-bg:      #3A1A18;
    --danger-border:  #6A2A24;
    --relance:        #E0B25A;
    --relance-bg:     #3A2C12;
    --relance-border: #5C4718;

    --claude:        #D9B6CF;
    --claude-bg:     #3A2440;

    /* Boutons prunes : plus clairs que les cartes, sinon ils s'y fondent */
    --bg-dark:       #6B4766;
    --bg-dark-hover: #7D5577;
    --selected-bg:     #E7C8DD;
    --selected-fg:     #221327;
    --selected-border: #E7C8DD;
    --unselected-border: #6E5576;

    --step-done-bg:    #4A2F48;  --step-done-fg:    #E6DEE8;
    --step-current-bg: #F5A524;  --step-current-fg: #221327;
    /* Objets : texte plus clair, fond foncé teinté, aplat moyen (icône blanche lisible) */
    --obj-deal:          #E0B25A;  --obj-deal-bg:       #3A2C12;  --obj-deal-line:       #F5A524;  --obj-deal-solid:       #8A6417;
    --obj-company:       #D9B6CF;  --obj-company-bg:    #3A2440;  --obj-company-line:    #9A7590;  --obj-company-solid:    #8A5E7E;
    --obj-contact:       #8CC3DE;  --obj-contact-bg:    #15303D;  --obj-contact-line:    #4F8FB0;  --obj-contact-solid:    #3C7896;
    --obj-quote:         #4CC38A;  --obj-quote-bg:      #16301F;  --obj-quote-line:      #3A9A6A;  --obj-quote-solid:      #2E7F55;
    --obj-consultant:    #A9ADEB;  --obj-consultant-bg: #23254A;  --obj-consultant-line: #6C71C4;  --obj-consultant-solid: #5A5FB0;
    --obj-lead:          #F28DB8;  --obj-lead-bg:       #3B1A28;  --obj-lead-line:       #C2407A;  --obj-lead-solid:       #B03A6E;
    --linkedin:          #70B5F9;  --linkedin-bg:       #14283D;

    --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.4);
  }