/** * Manusk Design Tokens — SSOT CSS * Source: /home/debian/ks5b/manusk/brand/tokens.json * Version: 1.0.0 · 2026-07-20 * * Usage: * * Puis mapper les variables produit si besoin : * :root { --m-product-accent: var(--m-accent); } */ :root { /* —— Couleurs marque —— */ --m-primary: #0e6b6e; --m-primary-dark: #084f52; --m-primary-hover: #0a585b; --m-accent: #2dd4bf; --m-accent-soft: #5a9a9e; /* —— Surfaces dark (défaut ops / apps) —— */ --m-canvas: #0b1214; --m-surface: #142022; --m-surface-2: #1a2a2d; --m-border: #1f3336; --m-border-strong: #2a4548; --m-text: #e8f4f4; --m-muted: #8aa8aa; /* —— Surfaces light (sites grand public) —— */ --m-paper: #f5f8f9; --m-ink: #1a2428; /* —— Sémantique —— */ --m-ok: #3dd68c; --m-warn: #f0c14b; --m-danger: #e85d5d; --m-white: #ffffff; --m-black: #000000; /* —— Accent produit (override par app) —— */ --m-product-accent: var(--m-accent); /* —— Gradients signature —— */ --m-gradient-signature: linear-gradient(90deg, #0e6b6e 0%, #2dd4bf 55%, #5a9a9e 100%); --m-gradient-hero: radial-gradient(1200px 600px at 12% -10%, #143033 0%, #0b1214 55%); --m-gradient-mark: linear-gradient(145deg, #0e6b6e, #084f52); /* —— Typographie —— */ --m-font-sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif; --m-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --m-fs-xs: 0.75rem; --m-fs-sm: 0.875rem; --m-fs-base: 1rem; --m-fs-lg: 1.125rem; --m-fs-xl: 1.35rem; --m-fs-2xl: 1.7rem; --m-fs-3xl: 2.1rem; --m-fw-body: 400; --m-fw-semibold: 600; --m-fw-bold: 700; --m-lh-tight: 1.25; --m-lh-body: 1.55; --m-track-eyebrow: 0.08em; --m-track-title: -0.02em; /* —— Forme & elevation —— */ --m-radius-sm: 8px; --m-radius: 12px; --m-radius-lg: 14px; --m-radius-pill: 999px; --m-signature-bar: 3px; --m-touch: 52px; --m-shadow-card: 0 8px 28px rgba(0, 0, 0, 0.28); --m-shadow-soft: 0 2px 10px rgba(14, 107, 110, 0.15); /* —— Aliases rétro-compat (apps existantes) —— */ --teal: var(--m-primary); --teal-dark: var(--m-primary-dark); --bg: var(--m-canvas); --surface: var(--m-surface); --surface2: var(--m-surface-2); --text: var(--m-text); --muted: var(--m-muted); --danger: var(--m-danger); --ok: var(--m-ok); --warn: var(--m-warn); --radius: var(--m-radius-lg); --touch: var(--m-touch); --accent: var(--m-product-accent); --border: var(--m-border); --card: var(--m-surface); --panel: var(--m-surface); --panel-2: var(--m-surface-2); } /* Mode light optionnel */ .manusk-theme-light { --m-canvas: var(--m-paper); --m-surface: var(--m-white); --m-surface-2: #eef4f5; --m-border: #d5e3e4; --m-border-strong: #b7cdcf; --m-text: var(--m-ink); --m-muted: #5a7274; --bg: var(--m-canvas); --surface: var(--m-surface); --surface2: var(--m-surface-2); --text: var(--m-text); --muted: var(--m-muted); --border: var(--m-border); --card: var(--m-surface); --panel: var(--m-surface); --panel-2: var(--m-surface-2); --m-gradient-hero: radial-gradient(1000px 500px at 10% -10%, #e7f3f4 0%, #f5f8f9 60%); --m-shadow-card: 0 8px 24px rgba(14, 107, 110, 0.08); } /* Accents produit (optionnel sur ou ) */ [data-manusk-product="mediconvoi"] { --m-product-accent: #0e6b6e; } [data-manusk-product="lmdpt"] { --m-product-accent: #2dd4bf; } [data-manusk-product="rapplike"] { --m-product-accent: #3dd68c; } [data-manusk-product="pinocmod"] { --m-product-accent: #2dd4bf; } [data-manusk-product="offiquote"] { --m-product-accent: #5a9a9e; } [data-manusk-product="ehpad-planner"] { --m-product-accent: #0e6b6e; } [data-manusk-product="froidcheck"] { --m-product-accent: #5a9a9e; } [data-manusk-product="iarbre-plus"] { --m-product-accent: #2dd4bf; } [data-manusk-product="operator"] { --m-product-accent: #0e6b6e; }