/* ==========================================================================
   Stackly — Jetons de design
   Source unique de verite. Aucun selecteur ici, uniquement des variables.
   Charge en premier par base.html.twig, avant tout autre CSS.
   ========================================================================== */

:root {

  /* ---------- Surfaces et encres ---------------------------------------- */
  --canvas:            #FBFAF8;   /* fond de page */
  --surface:           #FFFFFF;   /* cartes, tableaux, modales */
  --surface-sunken:    #F5F2EC;   /* en-tetes de tableau, pieds de carte */
  --surface-muted:     #FAF8F4;   /* zones secondaires */

  --border-subtle:     #F1EDE6;   /* separateurs de lignes */
  --border:            #E8E3DA;   /* contours de cartes */
  --border-strong:     #DDD7CC;   /* contours de champs et boutons */
  --border-dashed:     #C9C3B7;   /* zones de depot, pointilles */

  --ink:               #16150F;   /* titres, boutons primaires */
  --ink-secondary:     #57544A;   /* paragraphes, libelles */
  --ink-muted:         #8A8578;   /* legendes, axes, placeholders */
  --ink-faint:         #A29C8F;   /* sur-titres, meta */
  --ink-disabled:      #C0BBB0;

  --ink-on-dark:       #FBFAF8;

  /* ---------- Teintes modules -------------------------------------------
     Une teinte = un outil. Une seule a la fois par ecran.
     `-ink` est la version assombrie, pour du texte pose sur la teinte (4,5:1).
     ---------------------------------------------------------------------- */
  --mod-documents:        #5B4FCF;
  --mod-documents-ink:    #4A419E;
  --mod-documents-tint:   rgba(91, 79, 207, 0.10);
  --mod-documents-tint-2: rgba(91, 79, 207, 0.05);

  --mod-stock:            #00918E;
  --mod-stock-ink:        #00706E;
  --mod-stock-tint:       rgba(0, 145, 142, 0.10);
  --mod-stock-tint-2:     rgba(0, 145, 142, 0.05);

  --mod-crm:              #CE5A44;
  --mod-crm-ink:          #A84532;
  --mod-crm-tint:         rgba(206, 90, 68, 0.10);
  --mod-crm-tint-2:       rgba(206, 90, 68, 0.05);

  --mod-planning:         #2A6FD0;
  --mod-planning-ink:     #1F5AAF;
  --mod-planning-tint:    rgba(42, 111, 208, 0.10);
  --mod-planning-tint-2:  rgba(42, 111, 208, 0.05);

  --mod-finance:          #2F8558;
  --mod-finance-ink:      #1F6B42;
  --mod-finance-tint:     rgba(47, 133, 88, 0.10);
  --mod-finance-tint-2:   rgba(47, 133, 88, 0.05);

  --mod-expenses:         #BE8724;
  --mod-expenses-ink:     #9A6E1C;
  --mod-expenses-tint:    rgba(190, 135, 36, 0.10);
  --mod-expenses-tint-2:  rgba(190, 135, 36, 0.05);

  /*  Le violet du module Temps, repris par l'Assistant qui l'a remplace
      au catalogue. Meme place dans la palette, meme contraste verifie.  */
  --mod-assistant:        #8B4E9C;
  --mod-assistant-ink:    #723E80;
  --mod-assistant-tint:   rgba(139, 78, 156, 0.10);
  --mod-assistant-tint-2: rgba(139, 78, 156, 0.05);

  /* Teinte du module courant. Surchargee par [data-module] sur <body>. */
  --accent:            var(--mod-documents);
  --accent-ink:        var(--mod-documents-ink);
  --accent-tint:       var(--mod-documents-tint);
  --accent-tint-2:     var(--mod-documents-tint-2);

  /* ---------- Statuts ----------------------------------------------------
     Reserves. Jamais reutilises comme couleur de serie.
     Toujours accompagnes d'un mot et d'une icone.
     ---------------------------------------------------------------------- */
  --success:           #2F8558;
  --success-ink:       #1F6B42;
  --success-tint:      rgba(47, 133, 88, 0.12);

  --warning:           #BE8724;
  --warning-ink:       #9A6E1C;
  --warning-tint:      rgba(190, 135, 36, 0.13);

  --danger:            #C0392B;
  --danger-ink:        #A32F23;
  --danger-tint:       rgba(192, 57, 43, 0.11);

  --info:              #2A6FD0;
  --info-ink:          #1F5AAF;
  --info-tint:         rgba(42, 111, 208, 0.11);

  /* ---------- Sequence data ----------------------------------------------
     Ordre fixe, jamais recycle. 5 series maximum par graphique.
     Au-dela : regroupement en « Autres ».
     Validee : bande de clarte, plancher de chroma, separation daltonisme,
     contraste sur fond blanc.
     ---------------------------------------------------------------------- */
  --data-1:            #5B4FCF;
  --data-2:            #CE5A44;
  --data-3:            #00918E;
  --data-4:            #BE8724;
  --data-5:            #2A6FD0;
  --data-6:            #8B4E9C;   /* usage exceptionnel */
  --data-7:            #2F8558;   /* usage exceptionnel */

  --grid-line:         #F1EDE6;
  --axis-line:         #E8E3DA;

  /* ---------- Typographie ------------------------------------------------ */
  --font-display: 'Bricolage Grotesque', Georgia, serif;
  --font-ui:      'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-display-1:    68px;   /* hero du site public */
  --text-display-2:    34px;   /* chiffre-cle, montant en vedette */
  --text-section:      42px;   /* titre de section du site public */
  --text-title-1:      27px;   /* titre de page dans l'app */
  --text-title-2:      19px;   /* titre de carte */
  --text-title-3:      16px;   /* titre de carte compact */
  --text-body-lg:      17px;
  --text-body:         15px;   /* taille par defaut de l'interface */
  --text-sm:           13px;
  --text-xs:           12px;
  --text-label:        10.5px; /* en-tete de colonne, sur-titre */

  --lh-tight:          1.02;
  --lh-snug:           1.25;
  --lh-normal:         1.55;
  --lh-loose:          1.6;

  --track-display:     -0.04em;
  --track-title:       -0.03em;
  --track-body:        0;
  --track-label:       0.13em;

  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;

  /* ---------- Espacements (base 4) --------------------------------------- */
  --space-1:           4px;
  --space-2:           8px;
  --space-3:           12px;
  --space-4:           16px;
  --space-5:           20px;
  --space-6:           24px;
  --space-8:           32px;
  --space-10:          40px;
  --space-12:          48px;
  --space-16:          64px;
  --space-24:          96px;

  --gutter-page:       48px;   /* 20px en dessous de 768px */
  --gutter-section:    96px;   /* 56px en dessous de 768px */

  /* ---------- Rayons ------------------------------------------------------ */
  --radius-chip:       6px;
  --radius-field:      8px;
  --radius-button:     10px;
  --radius-card:       14px;
  --radius-card-lg:    16px;
  --radius-pill:       100px;
  /* La barre laterale est une carte flottante : un rayon a elle. */
  --radius-sidebar:    18px;

  /* ---------- Elevation --------------------------------------------------
     Trois niveaux, pas quatre. L'ombre dit « ceci flotte », jamais « c'est joli ».
     ---------------------------------------------------------------------- */
  --shadow-1:          0 1px 2px rgba(22, 21, 15, 0.05);
  --shadow-2:          0 4px 12px rgba(22, 21, 15, 0.06), 0 1px 3px rgba(22, 21, 15, 0.04);
  --shadow-3:          0 16px 38px rgba(22, 21, 15, 0.09), 0 2px 5px rgba(22, 21, 15, 0.04);
  --focus-ring:        0 0 0 3px var(--accent-tint);

  /* ---------- Controles --------------------------------------------------- */
  --control-sm:        34px;
  --control-md:        40px;
  --control-lg:        46px;
  --field-height:      42px;
  --row-height:        52px;
  --row-height-dense:  44px;
  --touch-target:      44px;   /* plancher tactile sur mobile */

  /* ---------- Shell -------------------------------------------------------- */
  --sidebar-width:     248px;
  --sidebar-rail:      76px;
  /* Ecart entre la carte de la barre laterale et le bord de la fenetre. */
  --sidebar-gap:       10px;
  --topbar-height:     72px;

  /* ---------- Mouvement ---------------------------------------------------- */
  --ease:              cubic-bezier(0.2, 0, 0.1, 1);
  --duration-fast:     120ms;
  --duration:          180ms;
  --duration-slow:     260ms;

  /* ---------- Plans ---------------------------------------------------------
     L'echelle manquait, et chaque module choisissait son nombre : les modales
     de l'inventaire montaient a 1200 et 1300, celles du budget a 2000, l'aide
     et le tableau de bord a 9999 — tandis que la confirmation du systeme
     restait a 1060.

     Consequence, sur « Vider tout le stock » : la confirmation s'affichait
     SOUS la modale qui l'avait ouverte. Le bouton « Vider le stock » etait
     visible mais pas cliquable — le clic tombait sur le champ de saisie
     derriere. Rien ne se passait, et rien ne le disait.

     La confirmation est le dernier ecran avant un geste irreversible : elle
     passe devant tout, y compris une modale applicative. D'ou son plan propre,
     au-dessus du 9999 que deux feuilles utilisent encore.
     ------------------------------------------------------------------------ */
  --z-sticky:          1000;
  --z-overlay:         1040;   /* fonds sombres, tiroirs */
  --z-modal:           1200;   /* modales applicatives */
  /*  Le message doit se lire PAR-DESSUS la modale qui l'a declenche. Il valait
      1080, sous un commentaire qui pretendait deja cela : il passait donc
      derriere les modales (1200), et derriere deux fonds de modale restes a
      9999 dans support.css et dashboard-index.css. */
  --z-toast:           10000;
  --z-confirm:         10100;  /* confirmation systeme : devant tout, message compris */
}

/* Teinte du module courant, posee par <body data-module="..."> ------------- */
body[data-module="documents"] { --accent: var(--mod-documents); --accent-ink: var(--mod-documents-ink); --accent-tint: var(--mod-documents-tint); --accent-tint-2: var(--mod-documents-tint-2); }
body[data-module="stock"]     { --accent: var(--mod-stock);     --accent-ink: var(--mod-stock-ink);     --accent-tint: var(--mod-stock-tint);     --accent-tint-2: var(--mod-stock-tint-2); }
body[data-module="crm"]       { --accent: var(--mod-crm);       --accent-ink: var(--mod-crm-ink);       --accent-tint: var(--mod-crm-tint);       --accent-tint-2: var(--mod-crm-tint-2); }
body[data-module="planning"]  { --accent: var(--mod-planning);  --accent-ink: var(--mod-planning-ink);  --accent-tint: var(--mod-planning-tint);  --accent-tint-2: var(--mod-planning-tint-2); }
body[data-module="finance"]   { --accent: var(--mod-finance);   --accent-ink: var(--mod-finance-ink);   --accent-tint: var(--mod-finance-tint);   --accent-tint-2: var(--mod-finance-tint-2); }
body[data-module="expenses"]  { --accent: var(--mod-expenses);  --accent-ink: var(--mod-expenses-ink);  --accent-tint: var(--mod-expenses-tint);  --accent-tint-2: var(--mod-expenses-tint-2); }
body[data-module="assistant"] { --accent: var(--mod-assistant); --accent-ink: var(--mod-assistant-ink); --accent-tint: var(--mod-assistant-tint); --accent-tint-2: var(--mod-assistant-tint-2); }

/* Ecrans hors module (tableau de bord, profil, admin) : accent neutre ------ */
body[data-module="none"]      { --accent: var(--ink); --accent-ink: var(--ink); --accent-tint: rgba(22, 21, 15, 0.055); --accent-tint-2: rgba(22, 21, 15, 0.03); }

@media (max-width: 768px) {
  :root {
    --gutter-page:    20px;
    --gutter-section: 56px;
    --text-display-1: 40px;
    --text-section:   30px;
    --text-title-1:   20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration:      0ms;
    --duration-slow: 0ms;
  }
}