/* ============================================================================ APINEO — Design System: Colors & Type Foundations Source of truth: Apineo_CharteGraphique-test_Juin2026.pdf + brand logo SVGs ---------------------------------------------------------------------------- APINEO is a holding ("marque-mère"). Two operating sub-brands: • NEOERP — generalist ERP for TPE/PME (orders, stock, flows) → BLUE • NEOGDP — pharma compliance / Good Distribution Practices → GREEN The parent brand APINEO is VIOLET. Each brand owns one gradient. ============================================================================ */ :root { /* --------------------------------------------------------------------------- 1. BRAND CORE COLORS (charte chromatique — only these are "official") --------------------------------------------------------------------------- */ /* APINEO — Violet (the "API speed / interconnection" gradient) */ --apineo-violet-rose: #C15BFC; /* charte: "La rapidité du violet-rosé" */ --apineo-violet-deep: #751FFC; /* charte: "La maîtrise du violet profond" */ /* Gradient stop values as drawn in the real logo SVGs (slightly punchier): */ --apineo-grad-from: #CF53FF; --apineo-grad-to: #8014FF; --apineo-gradient: linear-gradient(90deg, #CF53FF 0%, #8014FF 100%); --apineo-gradient-135: linear-gradient(135deg, #CF53FF 0%, #8014FF 100%); /* Tech blue — "le dénominateur commun" (inspired by IBM blue) */ --apineo-blue: #003196; /* solid corporate / trust blue */ /* Pure white & pure black */ --apineo-white: #FFFFFF; --apineo-black: #000000; /* --------------------------------------------------------------------------- 2. SUB-BRAND GRADIENTS (taken directly from the logo "Avec Fonds" SVGs) --------------------------------------------------------------------------- */ /* NEOERP — Blue */ --neoerp-from: #009FFF; --neoerp-to: #004BFF; --neoerp-gradient: linear-gradient(90deg, #009FFF 0%, #004BFF 100%); --neoerp-solid: #0061F5; /* mid-stop, for flat fills / text on white */ --neoerp-deep: #003196; /* darkest, ties to corporate blue */ /* NEOGDP — Green / Teal */ --neogdp-from: #00C39B; --neogdp-to: #007E5C; --neogdp-gradient: linear-gradient(90deg, #00C39B 0%, #007E5C 100%); --neogdp-solid: #009E78; /* mid-stop, for flat fills / text on white */ --neogdp-deep: #006B4E; /* APINEO violet flat (for text/icons on white) */ --apineo-solid: #8B2BFF; /* --------------------------------------------------------------------------- 3. FUNCTIONAL NEUTRALS (⚠ NOT in charte — derived to build usable UI. Cool, very-slightly-blue grays so they sit under the brand palette. Never use these for the logo; logos stay strictly on charte colors.) --------------------------------------------------------------------------- */ --ink-900: #0B0D1A; /* near-black, primary text on light */ --ink-800: #1A1E33; --ink-700: #2C3150; --ink-600: #474D6B; /* secondary text */ --ink-500: #6B7193; /* tertiary / captions */ --ink-400: #9298B8; /* placeholder / disabled text */ --ink-300: #C4C8DD; /* strong borders */ --ink-200: #DFE2EF; /* default borders / dividers */ --ink-150: #EBEDF5; /* hairline borders */ --ink-100: #F2F4FA; /* subtle surface / hover */ --ink-50: #F8F9FD; /* app background */ /* Dark-mode / "Dark mode" surfaces (charte mentions site web dark mode) */ --night-900: #07060F; /* deepest bg */ --night-800: #0F0E1C; /* app bg */ --night-700: #181830; /* raised surface */ --night-600: #232444; /* card / panel */ --night-500: #33345C; /* border on dark */ /* --------------------------------------------------------------------------- 4. SEMANTIC COLORS success/info/brand map onto the real palette; warning/danger are ⚠ derived (harmonious oklch) because the charte has no alert colors. --------------------------------------------------------------------------- */ --success: #009E78; /* = neogdp green */ --success-bg: #E1F7F0; --info: #0061F5; /* = neoerp blue */ --info-bg: #E3EEFF; --brand: #8B2BFF; /* = apineo violet */ --brand-bg: #F2E8FF; --warning: #C77400; /* ⚠ derived */ --warning-bg: #FDF0DC; --danger: #D92D43; /* ⚠ derived */ --danger-bg: #FCE5E8; /* --------------------------------------------------------------------------- 5. SEMANTIC SURFACE / TEXT ALIASES (light theme defaults) --------------------------------------------------------------------------- */ --bg-app: var(--ink-50); --bg-surface: var(--apineo-white); --bg-subtle: var(--ink-100); --fg-1: var(--ink-900); /* primary text */ --fg-2: var(--ink-600); /* secondary text */ --fg-3: var(--ink-500); /* tertiary text */ --fg-muted: var(--ink-400); --border: var(--ink-200); --border-strong: var(--ink-300); --border-hair: var(--ink-150); /* --------------------------------------------------------------------------- 6. TYPOGRAPHY Display / logo wordmark : Archivo (Google Fonts ✓) Brand voice / mono / data: Cofo Sans Mono VF (Adobe Fonts — licensed) ⚠ substituted with "Spline Sans Mono" (free) Combination / big stats : Alumni Sans (Google Fonts ✓) --------------------------------------------------------------------------- */ --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Spline Sans Mono', 'Cofo Sans Mono VF', ui-monospace, 'SFMono-Regular', monospace; --font-accent: 'Alumni Sans', 'Archivo', sans-serif; /* Type scale (1.250 major-third-ish, tuned) — rem-based */ --text-2xs: 0.6875rem; /* 11px micro labels (mono) */ --text-xs: 0.75rem; /* 12px captions */ --text-sm: 0.875rem; /* 14px secondary / UI body */ --text-base: 1rem; /* 16px body */ --text-lg: 1.125rem; /* 18px lead body */ --text-xl: 1.375rem; /* 22px h4 / card title */ --text-2xl: 1.75rem; /* 28px h3 */ --text-3xl: 2.25rem; /* 36px h2 */ --text-4xl: 3rem; /* 48px h1 */ --text-5xl: 4rem; /* 64px display */ --text-6xl: 5.5rem; /* 88px hero display */ /* Weights (Archivo ships 100–900) */ --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --fw-black: 800; /* Line heights */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65; /* Letter-spacing */ --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.12em; /* mono eyebrows / overlines */ /* --------------------------------------------------------------------------- 7. SPACING (4px base grid) --------------------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* --------------------------------------------------------------------------- 8. RADII — the brand language is round (echoes the looping "e"). Use generous, soft corners; pills for actionable chips. --------------------------------------------------------------------------- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 36px; --radius-pill: 999px; /* --------------------------------------------------------------------------- 9. ELEVATION — soft, cool-tinted shadows (no harsh black). Charte forbids shadows ON THE LOGO; UI elevation is fine. --------------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(11, 13, 26, 0.06); --shadow-sm: 0 1px 3px rgba(11, 13, 26, 0.08), 0 1px 2px rgba(11, 13, 26, 0.04); --shadow-md: 0 4px 12px rgba(11, 13, 26, 0.08), 0 2px 4px rgba(11, 13, 26, 0.04); --shadow-lg: 0 12px 28px rgba(11, 13, 26, 0.12), 0 4px 8px rgba(11, 13, 26, 0.05); --shadow-xl: 0 24px 56px rgba(11, 13, 26, 0.16), 0 8px 16px rgba(11, 13, 26, 0.06); /* Brand-tinted glow for hero / focus on gradient surfaces */ --shadow-violet: 0 16px 40px rgba(128, 20, 255, 0.28); --shadow-blue: 0 16px 40px rgba(0, 75, 255, 0.26); --shadow-green: 0 16px 40px rgba(0, 126, 92, 0.24); /* Focus ring */ --ring: 0 0 0 3px rgba(139, 43, 255, 0.35); /* --------------------------------------------------------------------------- 10. MOTION — gentle, confident. No bounce; "fluidity" is the brand word. --------------------------------------------------------------------------- */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; } /* ============================================================================ SEMANTIC ELEMENT STYLES — opt-in base layer (apply to a .ds-scope wrapper) ============================================================================ */ .ds-scope { font-family: var(--font-body); color: var(--fg-1); font-size: var(--text-base); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .ds-scope h1, .h1 { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--text-4xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin: 0; } .ds-scope h2, .h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-3xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); margin: 0; } .ds-scope h3, .h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-2xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); margin: 0; } .ds-scope h4, .h4 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-xl); line-height: var(--lh-snug); margin: 0; } .ds-scope p, .p { font-size: var(--text-base); line-height: var(--lh-relaxed); color: var(--fg-2); margin: 0; text-wrap: pretty; } .lead { font-size: var(--text-lg); line-height: var(--lh-relaxed); color: var(--fg-2); } /* Mono eyebrow / overline — the signature "programmed" texture of the brand */ .eyebrow, .overline { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--fw-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); } /* Data / numeric / code */ .mono, code, .data { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-normal); } /* Big condensed stat number */ .stat { font-family: var(--font-accent); font-weight: var(--fw-bold); font-size: var(--text-5xl); line-height: 0.95; letter-spacing: var(--tracking-snug); } /* Gradient text helpers */ .text-gradient-apineo { background: var(--apineo-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .text-gradient-neoerp { background: var(--neoerp-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .text-gradient-neogdp { background: var(--neogdp-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }