@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap'); /* ============================================================ REPREASE — DESIGN TOKENS (bi-thème : sombre par défaut + clair) Refonte 2026-07-12. Réf. Linear. Instrument financier (chiffres mono). - Sombre = défaut. Clair = . - Palette ADOUCIE : pas de noir/blanc purs, contrastes tenus mais doux pour réduire la charge cognitive. - Jaune #FFD60A : accent (CTA, focus, note du Score). Texte sur jaune = noir. - Bordures et fills translucides via des tokens qui basculent selon le theme. ============================================================ */ :root { /* ---------- TOKENS NON-COLORÉS (partagés entre thèmes) ---------- */ --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; --numeric-tabular: "tnum" 1, "lnum" 1; --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem; --text-xl:1.375rem; --text-2xl:1.75rem; --text-3xl:2.5rem; --font-regular:400; --font-medium:500; --font-semibold:600; --font-bold:700; --leading-tight:1.2; --leading-normal:1.5; --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem; --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-full:999px; --layout-max-width:1200px; --layout-gutter:var(--space-5); --transition-fast:150ms ease; --transition-base:200ms ease; /* ---------- COULEURS — THÈME SOMBRE (défaut), adouci ---------- */ --color-neutral-0: #0A0B0C; --color-neutral-50: #101214; /* fond page */ --color-neutral-100:#171A1C; /* surface / cartes */ --color-neutral-200:#212427; /* surface enfoncée / survol */ --color-neutral-300:#2B2F33; /* pistes, remplissages */ --color-neutral-400:#6A6F76; /* texte très discret */ --color-neutral-500:#8C9198; /* légendes (muted) */ --color-neutral-600:#9EA3AA; --color-neutral-700:#BCC0C6; /* texte secondaire */ --color-neutral-800:#D9DBDE; --color-neutral-900:#E9EBED; /* texte principal — off-white doux, pas blanc cru */ --color-black: #14130F; /* « noir » doux, sert de texte sur le jaune */ --color-black-soft: #1B1D1F; --color-primary: #FFD60A; --color-primary-hover: #FFE04D; --color-primary-active: #E6C000; --color-primary-subtle: rgba(255,214,10,.13); --color-primary-border: rgba(255,214,10,.36); --color-on-primary: #14130F; /* Sémantique adoucie (moins saturée) */ --color-success:#52B98A; --color-success-subtle:rgba(82,185,138,.14); --color-warning:#E3AC55; --color-warning-subtle:rgba(227,172,85,.14); --color-danger: #ED7461; --color-danger-subtle: rgba(237,116,97,.14); --bg-app: var(--color-neutral-50); --bg-surface: var(--color-neutral-100); --bg-surface-sunken: var(--color-neutral-200); --bg-inverse: var(--color-neutral-900); --text-primary: var(--color-neutral-900); --text-secondary: var(--color-neutral-700); --text-muted: var(--color-neutral-500); --text-on-inverse:var(--color-neutral-50); --text-link: var(--color-neutral-900); /* Bordures + fills translucides (basculent en clair) */ --border-default: rgba(255,255,255,.09); --border-strong: rgba(255,255,255,.15); --border-focus: var(--color-primary); --fill-subtle: rgba(255,255,255,.05); /* boutons neutres, actif nav */ --fill-hover: rgba(255,255,255,.09); --fill-strong: rgba(255,255,255,.16); /* Tint des puces / badges / surligneur (--brand-tint, .rp-draw) : NEUTRE en sombre — le jaune translucide y vire « moutarde passé » et ternit tout. En CLAIR il reste jaune pâle (cf. bloc [data-theme="light"]), où l'effet surligneur fonctionne bien. */ --tint-soft: rgba(255,255,255,.16); --bg-glass: rgba(16,18,20,.72); /* topbar translucide (blur) */ --shadow-xs:0 1px 2px rgba(0,0,0,.28); --shadow-sm:0 1px 3px rgba(0,0,0,.36),0 1px 2px rgba(0,0,0,.28); --shadow-md:0 8px 24px rgba(0,0,0,.46); --focus-ring:0 0 0 3px rgba(255,214,10,.35); /* ---------- DATA-VIZ (Sankey, frises, barres) — lumineux sur charbon ---------- Catégoriel : distinct + pastel pour ressortir sur fond sombre sans crier. Les valeurs claires (calibrées sur blanc) sont dans le bloc [data-theme="light"]. */ --ch-blue:#6AA6FF; --ch-sky:#49C1EE; --ch-teal:#34D3B6; --ch-red:#F8748A; --ch-violet:#A992F7; --ch-orange:#FB9A55; --ch-amber:#F5C15C; --ch-cyan:#3FC9DC; --ch-slate:#9AA6B8; --ch-steel:#7C8AA0; --ch-green:#57C98D; --ch-gray:#8A929E; --ch-trunk:#5B6472; /* barre neutre du tronc (Compte de résultat) */ --ch-empty:#3A3F45; /* poste à zéro / placeholder */ --ch-good:rgba(82,185,138,.28); /* zone "atout" (cycle négatif) */ --sk-ribbon:.5; --sk-ribbon-hover:.66; /* opacité des rubans Sankey */ } /* ============================================================ THÈME CLAIR — . Off-white chaud + encre douce. ============================================================ */ :root[data-theme="light"]{ --color-neutral-0: #FFFFFF; --color-neutral-50: #FAF9F7; /* fond page (off-white chaud) */ --color-neutral-100:#FFFFFF; /* surface / cartes */ --color-neutral-200:#F2F1ED; /* surface enfoncée / survol */ --color-neutral-300:#E8E7E2; /* pistes, remplissages */ --color-neutral-400:#A8A69E; /* texte très discret */ --color-neutral-500:#86857D; /* légendes (muted) */ --color-neutral-600:#6E6D66; --color-neutral-700:#57564F; /* texte secondaire */ --color-neutral-800:#33322D; --color-neutral-900:#1C1B18; /* texte principal — encre douce, pas noir pur */ --color-black: #14130F; --color-black-soft: #2A2925; --color-primary-subtle: #FFF6D6; --color-primary-border: #F0D775; --color-success:#157F4B; --color-success-subtle:#E4F2EA; --color-warning:#B87503; --color-warning-subtle:#FBF0DA; --color-danger: #C0392B; --color-danger-subtle: #FAE7E4; --border-default: rgba(20,18,15,.10); --border-strong: rgba(20,18,15,.16); --fill-subtle: rgba(20,18,15,.04); --fill-hover: rgba(20,18,15,.07); --fill-strong: rgba(20,18,15,.13); --tint-soft: #FFF6D6; /* surligneur / puces : jaune pâle d'origine (fond clair) */ --bg-glass: rgba(250,249,247,.78); /* topbar translucide (blur) */ --shadow-xs:0 1px 2px rgba(15,15,13,.05); --shadow-sm:0 1px 3px rgba(15,15,13,.08),0 1px 2px rgba(15,15,13,.05); --shadow-md:0 6px 20px rgba(15,15,13,.10); --focus-ring:0 0 0 3px rgba(255,214,10,.5); /* Data-viz : teintes d'origine (calibrées sur fond clair). */ --ch-blue:#2563eb; --ch-sky:#0ea5e9; --ch-teal:#0d9488; --ch-red:#e11d48; --ch-violet:#7c3aed; --ch-orange:#ea580c; --ch-amber:#f59e0b; --ch-cyan:#0891b2; --ch-slate:#64748b; --ch-steel:#475569; --ch-green:#15803d; --ch-gray:#94a3b8; --ch-trunk:#334155; --ch-empty:#cbd5e1; --ch-good:#9FE1CB; --sk-ribbon:.28; --sk-ribbon-hover:.4; } /* Transition douce lors du basculement de thème. */ html{ color-scheme: dark; } :root[data-theme="light"]{ color-scheme: light; } body{ font-feature-settings: var(--numeric-tabular); transition: background .2s ease, color .2s ease; }