/* charte:littéral — verbatim copy of hoc-fr/pnfr-design-system tokens/tokens.css, the source of truth. Do not edit here: update the kit, then copy. */ /* ========================================================= PNFR — Design tokens Plan.Net France · House of Communication Source : le design system Serviceplan Group (couche fondation, reprise à l'identique) + le design system Plan.Net (typo Service, échelle éditoriale). Ce fichier est la fusion des deux, plus la couche dont les outils internes ont besoin. Trois couches, dans cet ordre : 1. MARQUE — les valeurs du groupe. Ne pas y toucher. 2. RÔLES — la sémantique groupe : bg, fg, accent, border. 3. OUTIL — extension PNFR : états, sévérités, densité, environnements. Dérivée de la couche 1, sans jamais introduire de teinte nouvelle. ========================================================= */ :root { /* ═══ 1. MARQUE ═══ */ --pn-digital-red: #FF4B4F; /* LA signature Serviceplan / Plan.Net */ --pn-red-hover: #FF9395; --pn-red-press: #E63A3E; --pn-digital-black: #363636; --pn-blackest-black: #000000; --pn-whitest-white: #FFFFFF; --pn-warm-grey: #E8E5DE; --pn-sand: #B9B09B; --pn-yes-green: #C1D850; --pn-mild-green: #94C29D; --pn-emerald-green: #2A654A; /* ═══ 2. RÔLES ═══ */ --bg: var(--pn-whitest-white); --bg-alt: var(--pn-warm-grey); /* surface de carte, canvas de page */ --bg-inverse: var(--pn-blackest-black); --fg: var(--pn-digital-black); /* jamais le noir pur en texte courant */ --fg-muted: #6E6E6E; --fg-subtle: #9A9A9A; --fg-inverse: var(--pn-whitest-white); --accent: var(--pn-digital-red); --accent-hover: var(--pn-red-hover); --accent-press: var(--pn-red-press); --on-accent: var(--pn-whitest-white); --border: rgba(54, 54, 54, 0.12); --border-strong: rgba(54, 54, 54, 0.28); --divider: var(--pn-warm-grey); --link: var(--pn-digital-red); --link-visited: var(--pn-red-hover); /* ---- Typographies ---- */ --font-sans: "Avenir Next LT Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; --font-brand: "Service", var(--font-sans); /* moments de marque uniquement — unicase */ --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --font-mono-brand: "Geist Mono", var(--font-mono); /* interfaces à logs */ --fw-regular: 400; --fw-medium: 500; --fw-demi: 600; /* le cheval de trait : titres, stats, boutons */ --fw-bold: 700; /* logotypes */ /* ---- Échelle typographique ---- Titres en Demi, casse phrase, deux lignes maximum, ferrés à gauche. */ --fs-display-xl: clamp(56px, 7vw, 100px); --lh-display-xl: 1; --fs-display-lg: clamp(40px, 5vw, 72px); --lh-display-lg: 1; --fs-h1: 48px; --lh-h1: 1.12; --fs-h2: 36px; --lh-h2: 1.12; --fs-h3: 28px; --lh-h3: 1.12; --fs-h4: 24px; --lh-h4: 1.2; --fs-body-lg: 20px; --lh-body-lg: 1.45; --fs-body: 16px; --lh-body: 1.45; --fs-sm: 15px; --lh-sm: 1.45; --fs-xs: 13px; --lh-xs: 1.4; --fs-eyebrow: 12px; --ls-eyebrow: 0.06em; --ls-tight: -0.02em; /* display */ --ls-snug: -0.01em; /* h1–h2 */ /* ---- Espacements — base 8 ---- 1 à 4 : rembourrage de composant. 5 à 10 : structure de page. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --slide-margin-x: 72px; --slide-margin-y: 56px; /* ---- Rayons — l'angle droit est la règle ---- */ --radius-none: 0px; --radius-sm: 2px; /* boutons, champs */ --radius-md: 4px; --radius-lg: 8px; /* exception */ --radius-pill: 999px; /* tags uniquement */ /* ---- Filets ---- */ --border-w-hair: 1px; --border-w-base: 1.5px; /* bouton secondaire */ --border-w-bold: 3px; /* barre d'accent, ouverture de section */ /* ---- Élévation — sobre, orientée impression, jamais colorée ---- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); /* survol */ --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06); /* cartes */ --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.08); /* menus, popovers */ --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.12); /* modales */ /* ---- Mouvement ---- */ --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1); --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; /* ═══ 3. OUTIL (extension PNFR) ═══ */ --success: var(--pn-emerald-green); --on-success: var(--pn-whitest-white); --success-soft: #E3EDE8; --warning: #B06A00; --on-warning: var(--pn-whitest-white); --warning-soft: #F7EEDC; --danger: var(--pn-red-press); --on-danger: var(--pn-whitest-white); --danger-soft: #FDE7E7; --info: var(--pn-digital-black); --on-info: var(--pn-whitest-white); --info-soft: rgba(54, 54, 54, 0.07); /* Assistance — les fonctions assistées par IA. Dérivé du Yes Green de la palette groupe, la seule teinte encore inemployée ; assombri en thème clair pour tenir le contraste sur du texte. */ --assist: #6B7A17; --on-assist: var(--pn-whitest-white); --assist-soft: #F0F4DC; --sev-critical: #8B1114; --sev-high: var(--pn-red-press); --sev-medium: var(--warning); --sev-low: var(--fg-muted); --sev-info: var(--fg-subtle); --env-prod: var(--pn-emerald-green); --env-staging: var(--warning); --env-dev: var(--fg-muted); /* Séries de graphique — six teintes que l'œil sépare, tirées de la palette groupe et de ses assombrissements. Elles ne portent aucun sens d'état : c'est le rang dans la série qui compte, rien d'autre. Le rouge digital ouvre la série parce qu'une courbe principale mérite l'accent ; les suivantes s'éteignent progressivement. */ --serie-1: var(--pn-digital-red); --serie-2: var(--pn-emerald-green); --serie-3: var(--pn-digital-black); --serie-4: var(--warning); --serie-5: var(--pn-sand); --serie-6: #6B7A17; --h-control: 44px; /* hauteur du bouton moyen : 13px de rembourrage + 15px + 13px */ --d-row-y: 10px; --d-cell-x: 14px; --z-sticky: 100; --z-header: 200; --z-dropdown: 400; --z-modal: 600; --z-toast: 700; --z-palette: 800; } [data-density="compact"] { --h-control: 36px; --d-row-y: 6px; --d-cell-x: 10px; }