/* =============================================================================
   Indeso Design System - pont MudBlazor
   -----------------------------------------------------------------------------
   MudBlazor expose toute sa palette sous forme de variables CSS (--mud-*) que
   ses composants consomment en interne. En rebranchant ces variables sur nos
   tokens, l'ensemble des composants MudBlazor - et donc les 94 composants My*
   qui reposent dessus - suit automatiquement la marque active.

   Consequence concrete : changer de client ne demande de modifier ni un
   composant, ni le theme C#. Un attribut data-my-brand sur <html> suffit,
   et le changement est visible sans rechargement de page.

   POURQUOI LE SELECTEUR html[data-my-brand] ET NON :root
   MudThemeProvider injecte ses propres variables dans un <style> ajoute au
   document a l'execution, sur :root. Selon l'ordre d'insertion, il pourrait
   ecraser ce fichier. html[data-my-brand] a une specificite superieure
   (0,1,1 contre 0,1,0) : notre mappage gagne donc toujours, quel que soit
   l'ordre de chargement. Ne pas rabaisser ce selecteur a :root.
   ============================================================================= */

html[data-my-brand] {

    /* ---- Couleurs principales ---- */
    --mud-palette-primary: var(--my-action-primary);
    --mud-palette-primary-text: var(--my-action-primary-text);
    --mud-palette-primary-darken: var(--my-brand-primary-dark);
    --mud-palette-primary-lighten: var(--my-brand-primary-light);
    --mud-palette-primary-hover: rgba(var(--my-brand-primary-rgb), 0.06);

    --mud-palette-secondary: var(--my-action-secondary);
    --mud-palette-secondary-text: var(--my-action-secondary-text);
    --mud-palette-secondary-darken: var(--my-brand-secondary-dark);
    --mud-palette-secondary-lighten: var(--my-brand-secondary-light);
    --mud-palette-secondary-hover: rgba(var(--my-brand-secondary-rgb), 0.06);

    --mud-palette-tertiary: var(--my-brand-tertiary);
    --mud-palette-tertiary-text: var(--my-brand-tertiary-contrast);

    /* ---- Composantes RVB ----
       MudBlazor s'en sert pour composer des teintes translucides : bordure d'un
       bouton Outlined, fond d'un etat survole, ombre coloree. Ces variables sont
       donc indispensables, et pas seulement un complement des couleurs pleines.

       Les omettre produit un defaut trompeur : le texte d'un bouton suit la
       marque tandis que sa bordure reste au violet MudBlazor. Le composant a
       l'air presque juste, ce qui rend le probleme difficile a reperer. */
    --mud-palette-primary-rgb: var(--my-brand-primary-rgb);
    --mud-palette-secondary-rgb: var(--my-brand-secondary-rgb);
    --mud-palette-tertiary-rgb: var(--my-brand-tertiary-rgb);
    --mud-palette-success-rgb: var(--my-success-500-rgb);
    --mud-palette-warning-rgb: var(--my-warning-500-rgb);
    --mud-palette-error-rgb: var(--my-error-500-rgb);
    --mud-palette-info-rgb: var(--my-info-500-rgb);
    --mud-palette-dark-rgb: var(--my-neutral-800-rgb);

    /* ---- Retours utilisateur ---- */
    --mud-palette-info: var(--my-info-500);
    --mud-palette-info-text: #ffffff;
    --mud-palette-success: var(--my-success-500);
    --mud-palette-success-text: #ffffff;
    --mud-palette-warning: var(--my-warning-500);
    --mud-palette-warning-text: #ffffff;
    --mud-palette-error: var(--my-error-500);
    --mud-palette-error-text: #ffffff;

    /* ---- Fonds et surfaces ---- */
    --mud-palette-background: var(--my-surface-page);
    --mud-palette-background-gray: var(--my-surface-sunken);
    --mud-palette-surface: var(--my-surface-card);

    /* ---- Texte ---- */
    --mud-palette-text-primary: var(--my-text-heading);
    --mud-palette-text-secondary: var(--my-text-body);
    --mud-palette-text-disabled: var(--my-text-disabled);

    /* ---- Actions ---- */
    --mud-palette-action-default: var(--my-text-body);
    --mud-palette-action-disabled: var(--my-action-disabled-text);
    --mud-palette-action-disabled-background: var(--my-action-disabled);

    /* ---- Navigation : barre laterale et barre d'application ---- */
    --mud-palette-drawer-background: var(--my-nav-bg);
    --mud-palette-drawer-text: var(--my-nav-text);
    --mud-palette-drawer-icon: var(--my-nav-text);
    --mud-palette-appbar-background: var(--my-nav-bg);
    --mud-palette-appbar-text: var(--my-nav-text);

    /* ---- Traits, bordures, tableaux ---- */
    --mud-palette-lines-default: var(--my-border-subtle);
    --mud-palette-lines-inputs: var(--my-border-default);
    --mud-palette-divider: var(--my-border-subtle);
    --mud-palette-divider-light: var(--my-border-subtle);
    --mud-palette-table-lines: var(--my-border-subtle);
    --mud-palette-table-striped: var(--my-surface-sunken);
    --mud-palette-table-hover: var(--my-surface-hover);

    /* ---- Echelle de gris ---- */
    --mud-palette-gray-default: var(--my-neutral-500);
    --mud-palette-gray-light: var(--my-neutral-400);
    --mud-palette-gray-lighter: var(--my-neutral-100);
    --mud-palette-gray-dark: var(--my-neutral-600);
    --mud-palette-gray-darker: var(--my-neutral-700);

    /* ---- Mise en page ---- */
    --mud-default-borderradius: var(--my-radius-sm);
    --mud-drawer-width-left: 248px;
    --mud-drawer-width-right: 248px;
    --mud-drawer-mini-width-left: 56px;
    --mud-drawer-mini-width-right: 56px;

    /* ---- Typographie ----
       MudBlazor lit ces variables pour MudText. On les aligne sur nos tokens
       pour eviter que MudText et un <h2> HTML ne rendent differemment. */
    --mud-typography-default-family: var(--my-font-sans);
    --mud-typography-default-size: var(--my-font-size-md);
    --mud-typography-default-weight: var(--my-font-weight-regular);
    --mud-typography-default-lineheight: var(--my-line-height-normal);

    --mud-typography-h1-family: var(--my-font-sans);
    --mud-typography-h1-size: var(--my-font-size-4xl);
    --mud-typography-h1-weight: var(--my-font-weight-bold);
    --mud-typography-h1-lineheight: var(--my-line-height-tight);

    --mud-typography-h2-family: var(--my-font-sans);
    --mud-typography-h2-size: var(--my-font-size-3xl);
    --mud-typography-h2-weight: var(--my-font-weight-bold);
    --mud-typography-h2-lineheight: var(--my-line-height-tight);

    --mud-typography-h3-family: var(--my-font-sans);
    --mud-typography-h3-size: var(--my-font-size-2xl);
    --mud-typography-h3-weight: var(--my-font-weight-bold);
    --mud-typography-h3-lineheight: var(--my-line-height-tight);

    --mud-typography-h4-family: var(--my-font-sans);
    --mud-typography-h4-size: var(--my-font-size-xl);
    --mud-typography-h4-weight: var(--my-font-weight-bold);
    --mud-typography-h4-lineheight: var(--my-line-height-snug);

    --mud-typography-h5-family: var(--my-font-sans);
    --mud-typography-h5-size: var(--my-font-size-lg);
    --mud-typography-h5-weight: var(--my-font-weight-bold);
    --mud-typography-h5-lineheight: var(--my-line-height-snug);

    --mud-typography-h6-family: var(--my-font-sans);
    --mud-typography-h6-size: var(--my-font-size-md);
    --mud-typography-h6-weight: var(--my-font-weight-bold);
    --mud-typography-h6-lineheight: var(--my-line-height-snug);

    --mud-typography-body1-family: var(--my-font-sans);
    --mud-typography-body1-size: var(--my-font-size-lg);
    --mud-typography-body2-family: var(--my-font-sans);
    --mud-typography-body2-size: var(--my-font-size-md);

    --mud-typography-caption-family: var(--my-font-sans);
    --mud-typography-caption-size: var(--my-font-size-xs);

    /* Pas de capitales automatiques sur les boutons : le registre du site
       vitrine ne convient pas a une interface de gestion dense. */
    --mud-typography-button-family: var(--my-font-sans);
    --mud-typography-button-size: var(--my-font-size-md);
    --mud-typography-button-weight: var(--my-font-weight-bold);
    --mud-typography-button-text-transform: none;

    --mud-typography-overline-family: var(--my-font-sans);
    --mud-typography-overline-size: var(--my-font-size-2xs);
}
