/* ============================================================================ ProfilPilot — Design Tokens ---------------------------------------------------------------------------- 100 % source : www.jaikit.fr (extraction Phase A, Étape 2). Aucune valeur inventée. Toute modification doit être motivée par jaikit.fr. Convention : --jk-* → token primitif (couleur brute, taille brute) --pp-* → alias sémantique ProfilPilot (surface, text, accent…) Les écrans client-facing consomment les --pp-* (sémantique stable), les --jk-* sont la palette source de vérité. Doctrine sober premium : - 1 seule couleur d'accent : OR (#d4a853) - le bleu jaikit (#4a9eff) est INTERDIT en Phase A (cyber héritage) - les états error/success utilisent rouge/vert dérivés - polices : Syne (display), DM Sans (corps), JetBrains Mono (code) ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&family=JetBrains+Mono:wght@400;500&display=swap"); :root { /* ─── COULEURS — palette source jaikit.fr ──────────────────────────────── */ --jk-noir: #0a0a0f; /* fond principal très sombre */ --jk-noir-2: #12121a; /* surface élevée niveau 1 */ --jk-noir-3: #1c1c28; /* surface élevée niveau 2 */ --jk-or: #d4a853; /* accent OR — UNIQUE accent autorisé */ --jk-or-clair: #e8c278; /* hover or */ --jk-or-pale: #f5e6c0; /* texte sur or */ --jk-blanc: #f0ece4; /* texte principal sur fond noir */ --jk-blanc-2: #c8c4bc; /* texte secondaire / sub */ --jk-gris: #6b6878; /* texte tertiaire / labels */ --jk-rouge: #e85d4a; /* erreur uniquement */ --jk-vert: #52c07e; /* succès uniquement */ /* Bordures translucides — extraction littérale jaikit.fr */ --jk-border-or-10: rgba(212, 168, 83, .10); --jk-border-or-12: rgba(212, 168, 83, .12); --jk-border-or-20: rgba(212, 168, 83, .20); --jk-border-or-25: rgba(212, 168, 83, .25); --jk-border-w-06: rgba(255, 255, 255, .06); --jk-border-w-07: rgba(255, 255, 255, .07); --jk-border-w-15: rgba(255, 255, 255, .15); --jk-border-w-20: rgba(255, 255, 255, .20); /* ─── ALIAS SÉMANTIQUES ProfilPilot ────────────────────────────────────── */ /* Surfaces (du fond le plus profond vers la surface la plus haute) */ --pp-bg: var(--jk-noir); /* page */ --pp-surface-1: var(--jk-noir-2); /* card, panel */ --pp-surface-2: var(--jk-noir-3); /* card élevée, modal, header */ /* Texte */ --pp-text: var(--jk-blanc); /* texte principal */ --pp-text-muted: var(--jk-blanc-2); /* texte secondaire */ --pp-text-subtle: var(--jk-gris); /* labels, métadonnées, footer */ /* Accent — OR uniquement */ --pp-accent: var(--jk-or); --pp-accent-hover: var(--jk-or-clair); --pp-accent-soft: var(--jk-or-pale); --pp-accent-on: var(--jk-noir); /* texte sur fond accent (contraste) */ /* Bordures sémantiques */ --pp-border: var(--jk-border-w-07); /* défaut sur surface */ --pp-border-strong:var(--jk-border-w-15); /* hover, focus, active */ --pp-border-accent:var(--jk-border-or-20); /* accentué, sélection */ /* États (à utiliser avec parcimonie, jamais comme couleurs décoratives) */ --pp-success: var(--jk-vert); --pp-danger: var(--jk-rouge); /* ─── TYPOGRAPHIE — extraction jaikit.fr ───────────────────────────────── */ --pp-font-display: 'Syne', sans-serif; /* h1, h2, h3, boutons */ --pp-font-body: 'DM Sans', sans-serif; /* paragraphes, UI */ --pp-font-mono: 'JetBrains Mono', monospace; /* code, IDs, valeurs tech */ /* Échelle de tailles — uniquement les valeurs réellement utilisées sur la landing */ --pp-fs-10: 10px; --pp-fs-11: 11px; --pp-fs-12: 12px; --pp-fs-13: 13px; --pp-fs-14: 14px; --pp-fs-15: 15px; /* corps boutons */ --pp-fs-16: 16px; /* corps par défaut */ --pp-fs-17: 17px; --pp-fs-18: 18px; /* h3, hero-sub */ --pp-fs-20: 20px; --pp-fs-22: 22px; --pp-fs-24: 24px; --pp-fs-32: 32px; /* Tailles fluides pour titres principaux (clamp jaikit.fr littéral) */ --pp-fs-h2-fluid: clamp(32px, 4vw, 52px); --pp-fs-h1b-fluid: clamp(36px, 5vw, 64px); --pp-fs-h1-fluid: clamp(42px, 5.5vw, 72px); /* Poids */ --pp-fw-light: 300; --pp-fw-regular: 400; --pp-fw-medium: 500; --pp-fw-semi: 600; --pp-fw-bold: 700; --pp-fw-black: 800; /* Hauteurs de ligne */ --pp-lh-tight: 1.0; --pp-lh-snug: 1.1; --pp-lh-body: 1.6; /* défaut body jaikit.fr */ --pp-lh-relaxed: 1.7; --pp-lh-loose: 1.8; /* Letter-spacing */ --pp-ls-tightest: -2px; --pp-ls-tighter: -1.5px; --pp-ls-tight: -.5px; --pp-ls-normal: 0; --pp-ls-wide: .3px; --pp-ls-wider: 1px; --pp-ls-widest: 1.5px; --pp-ls-mega: 2px; /* ─── ESPACEMENT — échelle dérivée des valeurs réellement utilisées ────── */ --pp-sp-1: 2px; --pp-sp-2: 4px; --pp-sp-3: 6px; --pp-sp-4: 8px; --pp-sp-5: 10px; --pp-sp-6: 12px; --pp-sp-7: 14px; --pp-sp-8: 16px; --pp-sp-9: 20px; --pp-sp-10: 24px; --pp-sp-12: 28px; --pp-sp-14: 32px; --pp-sp-16: 36px; --pp-sp-18: 40px; --pp-sp-20: 48px; --pp-sp-24: 64px; --pp-sp-28: 72px; --pp-sp-32: 80px; /* ─── RAYONS — extraction littérale jaikit.fr ──────────────────────────── */ --pp-r-xs: 4px; /* tags, micro-pills */ --pp-r-sm: 8px; /* inputs, petits boutons */ --pp-r-md: 16px; /* cards classiques */ --pp-r-lg: 24px; /* cards majeures, modales */ --pp-r-xl: 40px; /* grandes surfaces */ --pp-r-pill: 50px; /* boutons CTA pilule */ --pp-r-full: 50%; /* avatars, ronds */ /* ─── OMBRES ───────────────────────────────────────────────────────────── */ --pp-shadow-card: 0 4px 32px rgba(0, 0, 0, .5); /* card par défaut */ --pp-shadow-or: 0 0 60px rgba(212, 168, 83, .18); /* glow accent */ --pp-shadow-cta: 0 8px 32px rgba(212, 168, 83, .35); /* CTA primaire */ /* ─── TRANSITIONS ──────────────────────────────────────────────────────── */ --pp-tr-fast: all .15s ease; --pp-tr-base: all .25s ease; --pp-tr-slow: all .35s ease; } /* ============================================================================ MODE JOUR (LIGHT) — fallback de secours ---------------------------------------------------------------------------- IMPORTANT : jaikit.fr est dark-only. Le mode jour ci-dessous est *dérivé* des mêmes primitives --jk-* (aucune couleur inventée), uniquement par inversion sémantique des alias --pp-*. C'est un mode de secours pour les contextes où le dark gêne (vidéoprojection en plein jour, daltonisme, préférence client). Ce n'est PAS une seconde identité visuelle. Activation : → forcé jour → forcé nuit (défaut) pas d'attribut + prefers-color-scheme: light → jour automatique ========================================================================== */ [data-theme="light"] { /* Surfaces — du fond le plus clair vers la surface la plus haute */ --pp-bg: #ffffff; /* page : blanc franc, plus net que --jk-blanc */ --pp-surface-1: var(--jk-blanc); /* #f0ece4 — cream paper jaikit */ --pp-surface-2: #ffffff; /* surface élevée : white sur cream */ /* Texte */ --pp-text: var(--jk-noir); /* #0a0a0f — noir profond jaikit */ --pp-text-muted: var(--jk-noir-3); /* #1c1c28 */ --pp-text-subtle: var(--jk-gris); /* #6b6878 — identique aux deux modes */ /* Accent — l'OR fonctionne tel quel sur cream et white (testé) */ --pp-accent: var(--jk-or); --pp-accent-hover: #b88a35; /* or assombri pour hover sur fond clair */ --pp-accent-soft: var(--jk-or-pale); --pp-accent-on: var(--jk-noir); /* texte sur fond accent inchangé */ /* Bordures — symétriques au dark mode (noir translucide) */ --pp-border: rgba(10, 10, 15, .08); --pp-border-strong: rgba(10, 10, 15, .16); --pp-border-accent: var(--jk-border-or-25); /* Ombres — noires diffuses, plus douces qu'en dark */ --pp-shadow-card: 0 4px 24px rgba(10, 10, 15, .08); --pp-shadow-or: 0 0 60px rgba(212, 168, 83, .14); --pp-shadow-cta: 0 6px 24px rgba(212, 168, 83, .28); } /* Préférence système — utilisé seulement si data-theme n'est PAS posé */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --pp-bg: #ffffff; --pp-surface-1: var(--jk-blanc); --pp-surface-2: #ffffff; --pp-text: var(--jk-noir); --pp-text-muted: var(--jk-noir-3); --pp-text-subtle: var(--jk-gris); --pp-accent-hover: #b88a35; --pp-border: rgba(10, 10, 15, .08); --pp-border-strong: rgba(10, 10, 15, .16); --pp-shadow-card: 0 4px 24px rgba(10, 10, 15, .08); --pp-shadow-or: 0 0 60px rgba(212, 168, 83, .14); --pp-shadow-cta: 0 6px 24px rgba(212, 168, 83, .28); } } /* ============================================================================ Reset minimal et application des tokens au document. Tout écran client-facing qui inclut design_tokens.css hérite immédiatement de la base typographique et chromatique sober premium ProfilPilot. ========================================================================== */ html, body { background: var(--pp-bg); color: var(--pp-text); font-family: var(--pp-font-body); font-size: var(--pp-fs-16); font-weight: var(--pp-fw-regular); line-height: var(--pp-lh-body); transition: background-color .25s ease, color .25s ease; } ::selection { background: var(--pp-accent); color: var(--pp-accent-on); }