/* =========================================================================
   SaaS métier SwissLife Valdahon — Fichier de tokens
   Palette : rouge SwissLife (carmin) + sable.
   Le rouge porte l'action et l'identité, le sable tient le fond et la
   chrome, le blanc porte la donnée.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  /* --- Rouge carmin — primaire ------------------------------------------ */
  --brand-900: #3A0C14;  /* Fond de sidebar en thème sombre */
  --brand-800: #58121F;  /* En-têtes de section sombres */
  --brand-700: #78182A;  /* Titres, texte sur fond de badge */
  --brand-600: #9E1B32;  /* ACTION PRINCIPALE — boutons pleins, liens */
  --brand-500: #B93247;  /* Survol d'action */
  --brand-400: #C4576B;  /* Bordures actives, focus */
  --brand-300: #E3A3AE;  /* Remplissages de graphiques */
  --brand-200: #F4D7DD;  /* Fonds de badge */
  --brand-100: #FBEDF0;  /* Fond de ligne sélectionnée */

  /* --- Neutres — fonds et texte ---------------------------------------- */
  --sand-50:  #FAF8F4;
  --sand-100: #F2EEE7;
  --sand-200: #E4DFD6;
  --sand-300: #C9C3B8;
  --sand-500: #8A8378;
  --sand-700: #57524A;
  --sand-900: #2B2822;
  --sand-950: #1C1A17;
  --white:    #FFFFFF;

  /* --- Sémantiques ------------------------------------------------------
     `danger` est un rouge nettement plus chaud que la marque : il reste
     identifiable à côté d'une action carmin, et n'apparaît jamais sans
     un verbe destructeur explicite ou une icône d'alerte.                 */
  --success: #2F6A4F;
  --warning: #B4610D;
  --danger:  #C6382B;
  --info:    #2A5E7A;
  --ai:      #6B4FA8;   /* RÉSERVÉ au contenu généré par IA. Jamais ailleurs. */

  /* --- Rôles applicatifs — thème clair ---------------------------------- */
  --bg:            var(--sand-50);
  --bg-alt:        var(--sand-100);
  --surface:       var(--white);
  --surface-sunk:  var(--sand-100);
  --fg:            var(--sand-900);
  --fg-strong:     var(--sand-950);
  --fg-muted:      var(--sand-500);
  --fg-body:       var(--sand-700);
  --border:        var(--sand-200);
  --border-soft:   var(--sand-300);
  --action:        var(--brand-600);
  --action-hover:  var(--brand-500);
  --action-fg:     var(--white);
  --focus:         var(--brand-400);
  --row-selected:  var(--brand-100);
  --badge-bg:      var(--brand-200);
  --badge-fg:      var(--brand-700);
  --chart-fill:    var(--brand-300);

  /* --- Sidebar — sable, texte sombre -------------------------------------
     La chrome est neutre : teintée en rouge dilué elle vire au rose et
     entre en concurrence avec l'action. Le sable est déjà la famille du
     fond de page ; le carmin ne sert plus qu'à marquer l'entrée active. */
  --sidebar:        #EFEBE3;
  --sidebar-fg:     var(--sand-900);
  --sidebar-muted:  #625C53;
  --sidebar-hover:  #E6E1D6;
  --sidebar-active: var(--white);
  --sidebar-active-fg: var(--brand-700);
  --sidebar-border: #E0DACE;
  --space-rule:     var(--brand-600);

  /* Teintes de fond sémantiques (dérivées, opacité constante) */
  --success-bg: color-mix(in srgb, var(--success) 12%, var(--surface));
  --warning-bg: color-mix(in srgb, var(--warning) 12%, var(--surface));
  --danger-bg:  color-mix(in srgb, var(--danger)  12%, var(--surface));
  --info-bg:    color-mix(in srgb, var(--info)    12%, var(--surface));
  --ai-bg:      color-mix(in srgb, var(--ai)      12%, var(--surface));

  /* --- Typographie — base 16 px, ratio 1,25 ----------------------------- */
  --font-ui:   'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-data: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --display-size: 32px;   --display-lh: 1.15;  --display-weight: 600;
  --h1-size: 26px;        --h1-lh: 1.2;        --h1-weight: 600;
  --h2-size: 21px;        --h2-lh: 1.25;       --h2-weight: 600;
  --h3-size: 18px;        --h3-lh: 1.3;        --h3-weight: 600;
  --body-size: 16px;      --body-lh: 1.55;     --body-weight: 400;
  --body-sm-size: 14px;   --body-sm-lh: 1.5;
  --caption-size: 13px;   --caption-lh: 1.4;
  --micro-size: 11px;     --micro-lh: 1.3;     --micro-weight: 600;
  --micro-tracking: 0.08em;

  /* --- Espacement — base 4 px ------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* --- Rayons ----------------------------------------------------------- */
  --r-field: 6px;    /* champs, boutons, badges carrés */
  --r-card: 10px;    /* cartes, tableaux, encadrés */
  --r-panel: 14px;   /* modales, panneaux */
  --r-pill: 999px;   /* pastilles, filtres pilules */

  /* --- Profondeur — deux niveaux seulement ------------------------------ */
  --elev-1: 0 1px 2px rgba(28, 26, 23, .06);
  --elev-2: 0 8px 24px rgba(28, 26, 23, .12);

  /* --- Largeur de colonne — une seule pour toute l'application -----------
     Le contenu ne colle jamais au bord : il tient dans une colonne centrée
     dans la zone de travail, sidebar déduite. */
  --page-max: 1440px;

  /* --- Cibles tactiles --------------------------------------------------- */
  --touch: 44px;
  --touch-field: 48px;

  /* --- Mouvement — sous 200 ms, panneaux à 250 ms ------------------------ */
  --motion: 160ms cubic-bezier(.2, .8, .3, 1);
  --motion-panel: 250ms cubic-bezier(.2, .8, .3, 1);
}

/* =========================================================================
   Thème sombre — tokens redéfinis, pas une inversion.
   Les valeurs de sidebar sont portées par [data-space] plus bas.
   ========================================================================= */
[data-theme="dark"] {
  --bg:            #14181A;
  --bg-alt:        #191F21;
  --surface:       #1D2325;
  --surface-sunk:  #171C1E;
  --fg:            #E8E6E1;
  --fg-strong:     #F4F2ED;
  --fg-muted:      #9BA39F;
  --fg-body:       #C7CCC9;
  --border:        #2C3437;
  --border-soft:   #3A4447;
  --action:        #D45C72;
  --action-hover:  #E07184;
  --action-fg:     #2A0A11;
  --focus:         #E3A3AE;
  --row-selected:  #2C1A20;
  --badge-bg:      #3A1A24;
  --badge-fg:      #EDB3BE;
  --chart-fill:    #A8374E;


  /* Les sémantiques s'éclaircissent d'un cran pour rester lisibles */
  --success: #4E9E78;
  --warning: #D98A3A;
  --danger:  #E8776A;
  --info:    #5A9CBE;
  --ai:      #A88FD9;

  --success-bg: color-mix(in srgb, var(--success) 16%, var(--surface));
  --warning-bg: color-mix(in srgb, var(--warning) 16%, var(--surface));
  --danger-bg:  color-mix(in srgb, var(--danger)  16%, var(--surface));
  --info-bg:    color-mix(in srgb, var(--info)    16%, var(--surface));
  --ai-bg:      color-mix(in srgb, var(--ai)      16%, var(--surface));

  --elev-1: 0 1px 2px rgba(0, 0, 0, .35);
  --elev-2: 0 8px 24px rgba(0, 0, 0, .5);
}

/* =========================================================================
   Les deux espaces — §4 du squelette
   L'espace admin se distingue sans changer d'identité : une teinte de
   sidebar plus sombre et un filet de 3 px en haut du contenu suffisent.
   Pas de thème parallèle à maintenir. Le filet dit lequel : carmin pour
   le métier, graphite pour la machine.
   ========================================================================= */
[data-space="metier"] {
  --sidebar:        #EFEBE3;
  --sidebar-fg:     var(--sand-900);
  --sidebar-muted:  #625C53;
  --sidebar-hover:  #E6E1D6;
  --sidebar-active: var(--white);
  --sidebar-active-fg: var(--brand-700);
  --sidebar-border: #E0DACE;
  --space-rule:     var(--brand-600);
}
[data-space="admin"] {
  --sidebar:        #E2DCD1;
  --sidebar-fg:     #262320;
  --sidebar-muted:  #5F594F;
  --sidebar-hover:  #D9D2C5;
  --sidebar-active: var(--white);
  --sidebar-active-fg: #3A3631;
  --sidebar-border: #D2CABC;
  --space-rule:     #3A3631;
}
[data-theme="dark"][data-space="metier"] {
  --sidebar:        #1A1E20;
  --sidebar-fg:     #E5E3DE;
  --sidebar-muted:  #9AA09D;
  --sidebar-hover:  #232829;
  --sidebar-active: #2B3133;
  --sidebar-active-fg: #EDB3BE;
  --sidebar-border: rgba(255, 255, 255, .07);
  --space-rule:     #D45C72;
}
[data-theme="dark"][data-space="admin"] {
  --sidebar:        #141718;
  --sidebar-fg:     #DEDCD7;
  --sidebar-muted:  #8F9491;
  --sidebar-hover:  #1D2122;
  --sidebar-active: #262B2C;
  --sidebar-active-fg: #E5E3DE;
  --sidebar-border: rgba(255, 255, 255, .07);
  --space-rule:     #6E7671;
}

/* =========================================================================
   Statuts de visite — les 6 issues terrain
   Couleur + pastille + libellé, toujours les trois ensemble.
   Les statuts gardent leur sémantique : le vert dit « signé », pas
   « marque ». C'est ce qui les rend lisibles sur une interface rouge.
   ========================================================================= */
:root {
  --st-sans-suite:   var(--sand-500);
  --st-a-revoir:     var(--info);
  --st-absent:       var(--sand-300);
  --st-rdv-pris:     var(--success);
  --st-a-rappeler:   var(--warning);
  --st-deja-client:  var(--brand-600);
}
[data-theme="dark"] {
  --st-sans-suite:   #9BA39F;
  --st-absent:       #5B6669;
  --st-deja-client:  #D45C72;
}