/* ══════════════════════════════════════════════════════════════════════════ « Subtle Gradient » — design system Arven Distribution Importé depuis le projet Claude Design 61ae31be-7945-406d-960e-015b2381d95d ⚠️ CE FICHIER EST UNE COPIE, PAS UNE CRÉATION. Les six blocs `tokens/*.css` du projet Design sont recopiés ici tels quels pour qu'une re-synchronisation soit une comparaison ligne à ligne, et non une relecture. Tout ce qui est propre à l'ERP est rassemblé en fin de fichier, sous « ADAPTATION ». Le système, en une phrase : fond blanc, encre presque noire, typographie système, cartes grises à angles doux. Il n'y a AUCUN dégradé dedans — « Subtle Gradient » est un nom de marque, pas une description. Trois règles qui décident de presque tout : — #111111 est réservé aux actions primaires et aux titres ; le navy #0d182a appartient au LOGO, pas aux boutons ni au texte ; — la hiérarchie se fait par la taille, deux graisses (600/400) et le blanc — jamais par la couleur ; — pas d'effet au survol. Le primaire s'assombrit à l'appui, les liens se soulignent. C'est tout le vocabulaire d'interaction. ══════════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────── couleurs ─────────────────────────── La rampe neutre est ordonnée par clarté (1000 = le plus sombre). Les alias sémantiques en dessous sont les noms que le code doit employer ; ne jamais référencer la rampe directement. */ :root { /* — rampe neutre — */ --neutral-1000: #101010; --neutral-975: #111111; --neutral-950: #1a1a1a; --neutral-900: #242424; --neutral-700: #374151; --neutral-600: #6b7280; --neutral-500: #898989; --neutral-400: #a1a1aa; --neutral-200: #e5e7eb; --neutral-100: #f3f4f6; --neutral-75: #f5f5f5; --neutral-50: #f8f9fa; --neutral-0: #ffffff; /* — chromatiques de base — */ --blue-500: #3b82f6; --green-500: #10b981; --amber-500: #f59e0b; --red-500: #ef4444; --orange-400: #fb923c; --pink-500: #ec4899; --violet-500: #8b5cf6; --emerald-400: #34d399; /* — marque — */ --brand-navy-900: #0d182a; /* — action — */ --color-primary: var(--neutral-975); --color-primary-active: var(--neutral-900); --color-primary-disabled: var(--neutral-200); --color-on-primary: var(--neutral-0); /* — texte — */ --color-ink: var(--neutral-975); --color-text-body: var(--neutral-700); --color-text-muted: var(--neutral-600); --color-text-muted-soft: var(--neutral-500); --color-on-dark: var(--neutral-0); --color-on-dark-soft: var(--neutral-400); /* — surfaces — */ --color-canvas: var(--neutral-0); --color-surface-soft: var(--neutral-50); --color-surface-card: var(--neutral-75); --color-surface-strong: var(--neutral-200); --color-surface-dark: var(--neutral-1000); --color-surface-dark-elevated: var(--neutral-950); /* — filets — */ --color-hairline: var(--neutral-200); --color-hairline-soft: var(--neutral-100); --color-hairline-on-dark: rgba(255, 255, 255, 0.10); /* — accent (avec parcimonie : liens en ligne, notes de champ) — */ --color-brand-accent: var(--blue-500); /* — navy de marque : échantillonné sur le logo Arven Distribution. Pour le fond du lockup et les surfaces sombres qui portent la marque ; l'encre du texte reste #111111. — */ --color-brand-navy: var(--brand-navy-900); /* — sémantique — */ --color-success: var(--green-500); --color-warning: var(--amber-500); --color-error: var(--red-500); /* — pastels de pastille : catégories et fonds d'avatar seulement, jamais une action — */ --color-badge-orange: var(--orange-400); --color-badge-pink: var(--pink-500); --color-badge-violet: var(--violet-500); --color-badge-emerald: var(--emerald-400); } /* ─────────────────────────── typographie ─────────────────────────── Aucune fonte web n'est embarquée ni hébergée : le système emploie délibérément les mots-clés de police du navigateur. La hiérarchie tient à la taille, à deux graisses (600 / 400) et à un approche négatif sur les seules tailles d'affichage. */ :root { --font-sans: system-ui, sans-serif; --font-mono: ui-monospace, monospace; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* affichage — 600, approche négative */ --display-xl-size: 64px; --display-xl-weight: 600; --display-xl-leading: 1.05; --display-xl-tracking: -2px; --display-lg-size: 48px; --display-lg-weight: 600; --display-lg-leading: 1.1; --display-lg-tracking: -1.5px; --display-md-size: 36px; --display-md-weight: 600; --display-md-leading: 1.15; --display-md-tracking: -1px; --display-sm-size: 28px; --display-sm-weight: 600; --display-sm-leading: 1.2; --display-sm-tracking: -0.5px; /* titres */ --title-lg-size: 22px; --title-lg-weight: 600; --title-lg-leading: 1.3; --title-lg-tracking: -0.3px; --title-md-size: 18px; --title-md-weight: 600; --title-md-leading: 1.4; --title-md-tracking: 0; --title-sm-size: 16px; --title-sm-weight: 600; --title-sm-leading: 1.4; --title-sm-tracking: 0; /* interface */ --body-md-size: 16px; --body-md-weight: 400; --body-md-leading: 1.5; --body-md-tracking: 0; --body-sm-size: 14px; --body-sm-weight: 400; --body-sm-leading: 1.5; --body-sm-tracking: 0; --caption-size: 13px; --caption-weight: 500; --caption-leading: 1.4; --caption-tracking: 0; --code-size: 14px; --code-weight: 400; --code-leading: 1.5; --code-tracking: 0; --button-size: 14px; --button-weight: 600; --button-leading: 1; --button-tracking: 0; --nav-link-size: 14px; --nav-link-weight: 500; --nav-link-leading: 1.4; --nav-link-tracking: 0; /* paliers mobiles pour l'affichage (< 768px) */ --display-xl-size-mobile: 32px; --display-lg-size-mobile: 28px; --display-md-size-mobile: 24px; } /* ─────────────────────────── espacement ─────────────────────────── Unité de base 4px. */ :root { --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-xxl: 48px; --space-section: 96px; /* mise en page */ --container-max: 1200px; --page-gutter: 24px; --grid-gutter: 24px; --footer-column-gap: 16px; /* rembourrages nommés — les deux densités de carte du système */ --card-padding: 32px; --card-padding-compact: 24px; --cta-band-padding: 48px; --footer-padding-y: 64px; /* contrôles */ --nav-height: 64px; /* ⚠️ LA HAUTEUR DE TOUT BOUTON DU PROJET, ET IL N'Y EN A PLUS QU'UNE. Le système a longtemps eu deux crans — 40 px pour l'action d'une carte, 32 pour les commandes d'une ligne dense. Ils étaient cohérents pris séparément, et les voir cohabiter sur un même écran ne l'était pas : un bouton plus petit que ses voisins se lit comme un bouton de second rang, même quand il ne l'est pas. ⚠️ IL EST DISTINCT DE `--control-height`, ET CE N'EST PAS UN OUBLI. Les CHAMPS gardent leurs 40 px : on y saisit du texte, et les rétrécir coûte en lisibilité ce qu'on gagnerait en uniformité. Un bouton, lui, ne porte qu'un mot. Là où les deux se côtoient dans une même ligne, c'est le vertical-align qui les accorde, pas une hauteur commune. */ --button-height: 32px; --control-height: 40px; --control-padding-x: 20px; --control-padding-y: 12px; --input-padding-x: 14px; --input-padding-y: 10px; --icon-button-size: 36px; --avatar-size: 36px; --avatar-size-lg: 40px; --tab-padding-x: 14px; --tab-padding-y: 8px; --pill-group-padding: 6px; } /* ─────────────────────────── rayons ─────────────────────────── Hiérarchique : contrôles 8, cartes 12, héros 16. Ne jamais dépasser --radius-xl sur une carte — au-delà, ça se lit application grand public plutôt qu'outil professionnel. */ :root { --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 9999px; --radius-full: 9999px; } /* ─────────────────────────── élévation ─────────────────────────── Deux ombres, toutes deux à faible alpha. Pas de neumorphisme, pas de glassmorphisme, pas d'ombre lourde, pas de halo coloré. */ :root { --shadow-none: none; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --border-hairline: 1px solid var(--color-hairline); --border-hairline-soft: 1px solid var(--color-hairline-soft); --border-hairline-on-dark: 1px solid var(--color-hairline-on-dark); } /* ─────────────────────────── mouvement ─────────────────────────── AJOUT DÉLIBÉRÉ du projet Design : la spécification d'origine met l'animation hors périmètre. Ces valeurs existent uniquement pour que les changements d'état se résolvent au lieu de claquer. Rien ne s'anime au survol. */ :root { --duration-instant: 80ms; --duration-fast: 120ms; --duration-base: 180ms; --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); --transition-press: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } /* ══════════════════════════════════════════════════════════════════════════ ADAPTATION À L'ERP — tout ce qui suit est propre à ce dépôt. ══════════════════════════════════════════════════════════════════════════ */ /* ─────────── Teintes sémantiques ─────────── Le design system ne donne que les couleurs PURES (#10b981, #f59e0b, #ef4444) : il documente des pastilles de marketing, où un état tient dans une puce colorée. Un ERP a besoin de fonds teintés et de textes lisibles dessus — un bandeau de rupture, une alerte de réglage, un toast d'erreur. Dérivées par `color-mix` PLUTÔT QUE codées en dur : la règle du système est « des tokens, jamais de valeur hexadécimale brute ». Si la couleur d'erreur change là-haut, les six valeurs suivent, et personne n'a à retrouver les codes recopiés dans la feuille. */ :root { --tint-success: color-mix(in srgb, var(--color-success) 11%, var(--color-canvas)); --line-success: color-mix(in srgb, var(--color-success) 30%, var(--color-canvas)); --ink-success: color-mix(in srgb, var(--color-success) 40%, #000); --tint-warning: color-mix(in srgb, var(--color-warning) 13%, var(--color-canvas)); --line-warning: color-mix(in srgb, var(--color-warning) 34%, var(--color-canvas)); --ink-warning: color-mix(in srgb, var(--color-warning) 40%, #000); --tint-error: color-mix(in srgb, var(--color-error) 10%, var(--color-canvas)); --line-error: color-mix(in srgb, var(--color-error) 30%, var(--color-canvas)); --ink-error: color-mix(in srgb, var(--color-error) 40%, #000); } /* ─────────── Mesures de la coquille ─────────── Aucune n'existe dans le design system, et c'est normal : il documente un site vitrine et un tunnel de réservation, en disant explicitement que le tableau de bord et les écrans d'administration sont hors périmètre. La coquille est donc DÉDUITE du système plutôt que copiée — 56px de barre haute, c'est le 64px de `--nav-height` ramené à la densité d'un outil qu'on garde ouvert toute la journée. */ :root { --topbar-height: 56px; --sidebar-width: 232px; --list-width: 460px; /* La densité des CHAMPS de ligne dense : le 40px de `--control-height` ramené à ce qui tient dans une ligne de liste — le nombre de lots du garage, la quantité qu'on ajoute à un carton, la date d'une réception. ⚠️ IL NE SERT PLUS AUX BOUTONS, qui ont leur propre `--button-height` depuis qu'il n'y en a qu'une taille. Les deux valent 32 px, et ce n'est pas une redondance : c'est ce qui fait qu'un bouton et le champ d'à côté s'alignent au pixel dans ces lignes-là. Les faire diverger est un choix possible ; le faire par accident, en touchant un seul des deux, non. Il porte aussi la hauteur des articles de menu. */ --control-height-mini: 32px; } /* ─────────── Compatibilité ─────────── ⚠️ FILET DE SÉCURITÉ, PAS UNE API. Les feuilles de l'ERP ont été réécrites sur les tokens ci-dessus ; ces alias existent pour les endroits que le balisage porte encore en dur — un `style="…"` dans un gabarit, une règle oubliée. Sans eux, une variable disparue ne provoque AUCUNE erreur : la propriété est simplement ignorée, et un bouton devient transparent sur fond transparent sans que rien ne le signale. ⚠️ `--navy` NE PEINT PLUS LES BOUTONS. Il désigne le navy de marque, réservé au logo et aux surfaces qui portent la marque (le panneau de connexion). L'action primaire, c'est l'encre. */ :root { --navy: var(--color-brand-navy); --navy-soft: var(--color-primary-active); --off-white: var(--color-canvas); --alpine-mist: var(--color-surface-card); --slate-grey: var(--color-text-muted); --soft-sand: var(--color-surface-soft); --bg: var(--color-surface-soft); --sidebar: var(--color-canvas); --card: var(--color-canvas); --text: var(--color-ink); --muted: var(--color-text-muted); --line: var(--color-hairline); --hover: var(--color-surface-card); --accent: var(--color-primary); --accent-bg: var(--color-surface-card); --red: var(--color-error); --red-bg: var(--tint-error); --amber: var(--color-warning); --amber-bg: var(--tint-warning); --success: var(--color-success); --success-bg: var(--tint-success); --green-bg: var(--tint-success); --radius: var(--radius-md); --shadow: var(--shadow-sm); }