/* Design system « Organic » — primitives (source de vérité : projet design, _ds/organic). Ces tokens sont statiques et indépendants du thème clair/sombre : les rampes SONT la palette, chaque thème pioche ses paliers. Les rôles sémantiques (fond, surface, texte…) viennent de MudBlazor : utiliser var(--mud-palette-*) pour tout ce qui doit basculer avec le dark mode. Jamais de hex codé en dur dans les CSS de composants. */ :root { /* ── Rampes tonales 100-900 (OKLCH, lightness partagée entre rampes) ── */ --g-neutral-100: #f9f4ed; --g-neutral-200: #eee7db; --g-neutral-300: #dcd3c4; --g-neutral-400: #c0b6a5; --g-neutral-500: #a19786; --g-neutral-600: #82796a; --g-neutral-700: #645c50; --g-neutral-800: #474238; --g-neutral-900: #2e2b25; --g-accent-100: #fff2eb; --g-accent-200: #ffe1d0; --g-accent-300: #ffc6a5; --g-accent-400: #f6a06b; --g-accent-500: #d67f48; --g-accent-600: #b2622d; --g-accent-700: #8c491a; --g-accent-800: #643312; --g-accent-900: #402310; --g-accent2-100: #f0fae1; --g-accent2-200: #e1eecc; --g-accent2-300: #ccdbb2; --g-accent2-400: #aebf92; --g-accent2-500: #8fa073; --g-accent2-600: #728157; --g-accent2-700: #56633f; --g-accent2-800: #3d472b; --g-accent2-900: #272e1b; /* Rôles de base hors rampes */ --g-accent: #c67139; /* terracotta — accent principal */ --g-accent2: #7a8a5e; /* sauge — seconde voix */ --g-ink: #201e1d; /* encre (texte light / fond app dark) */ --g-bg-light: #f5ead8; /* fond app clair */ --g-surface-light: #ebddc5; --g-hero-card: #f0e6d6; /* carte KPI héro — reste crème même en dark */ /* « Moment » plein écran des assistants (entrée de stock, onboarding…) : fond brun fixe, identique dans les deux ambiances — la palette MudBlazor y est forcée en clair. */ --g-moment-deep: #4a3728; /* départ du dégradé, en-tête, pastille d'étape franchie */ --g-moment-soft: #9a8571; /* arrivée du dégradé, teinte de la colonne d'étapes */ /* ── Espacement ×1,10 — multiplié par la taille d'affichage (--g-scale, plus bas) ── */ --g-scale: 1; --g-space-1: calc(4.4px * var(--g-scale)); --g-space-2: calc(8.8px * var(--g-scale)); --g-space-3: calc(13.2px * var(--g-scale)); --g-space-4: calc(17.6px * var(--g-scale)); --g-space-6: calc(26.4px * var(--g-scale)); --g-space-8: calc(35.2px * var(--g-scale)); /* ── Rayons ── */ --g-radius-sm: 8px; --g-radius-md: 16px; --g-radius-lg: 28px; --g-radius-card: 24px; --g-radius-pill: 999px; /* ── Ombres encre douces ── */ --g-shadow-sm: 0 1px 2px rgba(46, 43, 37, 0.14); --g-shadow-md: 0 3px 10px rgba(46, 43, 37, 0.16); --g-shadow-lg: 0 12px 32px rgba(46, 43, 37, 0.22); /* Modales : plus profonde que --g-shadow-lg, la carte flotte au-dessus du voile flouté. */ --g-shadow-dialog: 0 24px 60px rgba(20, 16, 12, 0.4); } /* ── Taille d'affichage (préférence « Mon profil ») ── Attribut data-scale sur , posé par js/displayScale.js et piloté par DisplayScaleState. --g-scale porte le facteur : la taille de base (tout ce qui est en rem), les espacements --g-space-*, la grille d'espacement MudBlazor et les paddings des CSS du projet le suivent (css/density.css pour MudBlazor, calc(… * var(--g-scale)) dans les feuilles de composants). Pas de zoom CSS : il aurait faussé les hauteurs en vh du shell et le positionnement des popovers. Restent donc en pixels fixes les hauteurs (barre d'app, champs, lignes de table) et les filets sous 4 px. */ html[data-scale="standard"] { font-size: 90%; --g-scale: 0.9; } html[data-scale="compact"] { font-size: 80%; --g-scale: 0.8; } /* ── États d'interaction globaux ── */ :focus-visible { outline: 2px solid var(--g-accent); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--g-accent) 30%, transparent); }