/* ============================================================ INFINI Stratégies — Color tokens A monochrome, high-contrast noir system. Pure black & white with a precise neutral ink ramp. The brand uses NO decorative hues — color appears only for functional status signals, intentionally muted so it never breaks the cinematic palette. ============================================================ */ :root { /* ---- Primitive ramp: INK (cool-neutral grayscale) ---- */ --ink-1000: #000000; --ink-950: #0A0A0A; /* brand base — page black, hero, footer */ --ink-900: #121212; --ink-850: #181818; --ink-800: #1F1F1F; /* raised surface on dark */ --ink-700: #2B2B2B; /* hairline / border on dark */ --ink-600: #454545; --ink-500: #6B6B6B; /* muted text */ --ink-400: #8C8C8C; --ink-300: #B4B4B4; --ink-200: #D7D7D7; /* border on light */ --ink-150: #E3E3E3; --ink-100: #EBEBEB; /* raised surface on light */ --ink-50: #F2F2F2; /* page background — cool neutral gray */ --white: #FFFFFF; /* ---- Functional status (muted to sit inside the noir palette) ---- */ --signal-success: #2F7D5B; --signal-success-soft: #E6F0EA; --signal-danger: #B23A2E; --signal-danger-soft: #F6E7E5; --signal-warning: #B8861B; --signal-warning-soft: #F6EEDB; --signal-info: #3B6491; --signal-info-soft: #E6ECF3; /* ============================================================ SEMANTIC ALIASES — default (light / "paper") context ============================================================ */ --bg: var(--white); --surface: var(--white); --surface-raised: var(--ink-100); --surface-sunken: var(--ink-150); --text-primary: var(--ink-950); --text-secondary: var(--ink-500); --text-muted: var(--ink-400); --text-on-accent: var(--white); --border: var(--ink-200); --border-strong: var(--ink-950); --border-subtle: var(--ink-150); /* Primary action — Rouge Cinéma */ --accent: #E11D2A; --accent-hover: #BE1722; --accent-active: #9C1219; --accent-soft: #FBE7E8; --accent-muted: #F2A6AB; /* Inverse block (dark band inside a light page) */ --inverse-bg: var(--ink-950); --inverse-surface: var(--ink-850); --inverse-text: var(--white); --inverse-muted: var(--ink-400); --inverse-border: var(--ink-700); --focus-ring: #E11D2A; --overlay-scrim: rgba(10, 10, 10, 0.62); } /* ============================================================ DARK ("noir") context — the brand's hero/footer treatment. Apply on any element: or .theme-noir ============================================================ */ [data-theme="dark"], .theme-noir { --bg: var(--ink-950); --surface: var(--ink-900); --surface-raised: var(--ink-800); --surface-sunken: var(--ink-1000); --text-primary: var(--white); --text-secondary: var(--ink-300); --text-muted: var(--ink-500); --text-on-accent: #FFFFFF; --border: var(--ink-700); --border-strong: var(--white); --border-subtle: var(--ink-800); /* Rouge reads strongly on dark — keep it, go slightly brighter on hover */ --accent: #E11D2A; --accent-hover: #F24550; --accent-active: #BE1722; --focus-ring: #F24550; --overlay-scrim: rgba(0, 0, 0, 0.74); }