/* ========================================================================== PUBLICARD — DESIGN TOKENS -------------------------------------------------------------------------- Source unique de vérité pour les variables CSS partagées entre : - Le thème (global.css, style-account.css, style-success.css, etc.) - Le plugin Carte Builder Pro (cbp-style.css, cbp-dashboard.css) CONVENTION - Tous les tokens sont préfixés par --pc-* (Publicard). - Les fichiers en aval ne consomment PAS ces tokens dans leurs sélecteurs ; ils déclarent leurs variables historiques (--primary, --cbp-bg, etc.) en alias vers les tokens canoniques. Cela garantit zéro impact sur les sélecteurs existants. - Les fichiers du plugin utilisent une syntaxe avec valeur de repli : var(--pc-blue-450, #2463ff) Ainsi le plugin reste fonctionnel même si le thème n'est pas actif. CHARGEMENT Ce fichier est enqueué AVANT tous les autres CSS via functions.php (handle WP : "publicard-design-tokens"). ========================================================================== */ :root { /* ────────────────────────────────────────────────────────────────────── 1. COULEURS DE BASE ────────────────────────────────────────────────────────────────────── */ --pc-white: #FFFFFF; --pc-black: #000000; /* ────────────────────────────────────────────────────────────────────── 2. PALETTE DE MARQUE Bleus, indigos, violets, accents. Note : les nuances de bleu très proches sont conservées séparées car utilisées dans des contextes distincts (cf. blue-450 pour le plugin carte-builder-pro qui diffère de blue-600 utilisé dans le thème). ────────────────────────────────────────────────────────────────────── */ --pc-blue-450: #2463ff; /* Plugin carte-builder-pro — primary */ --pc-blue-500: #3B82F6; /* Texte gradient global, success p-blue */ --pc-blue-600: #2563EB; /* MARQUE — bleu royal (thème + dashboard) */ --pc-blue-700: #1d4ed8; /* Hover dashboard, info pcards */ --pc-blue-800: #174bd8; /* Plugin carte-builder-pro — primary strong */ --pc-blue-pure: #0066FF; /* Account light mode accent */ --pc-blue-neon: #2962FF; /* Account dark mode accent */ --pc-indigo-600: #4F46E5; /* Démarrage gradient bouton (thème) */ --pc-violet-500: #8B5CF6; /* Accent thème */ --pc-violet-600: #7C3AED; /* Fin gradient bouton (thème) */ --pc-pink-500: #EC4899; --pc-cyan-500: #0EA5E9; /* ────────────────────────────────────────────────────────────────────── 3. PALETTE NEUTRE (slate) Du plus clair au plus sombre. Les noms suivent une échelle Tailwind-like avec des paliers intermédiaires nommés explicitement quand nécessaire. ────────────────────────────────────────────────────────────────────── */ --pc-slate-50: #f8fafc; /* Fond ultra-doux (success p-bg, pcards-soft) */ --pc-slate-75: #F7F9FC; /* Fond body thème */ --pc-slate-100: #F0F2F5; /* Account light bg */ --pc-slate-110: #f4f6f8; /* Pcards surface-2 */ --pc-slate-120: #f8fbff; /* Plugin cbp panel-soft */ --pc-slate-130: #eef3fb; /* Plugin cbp bg */ --pc-slate-150: #E4E6EB; /* Toggle bg account */ --pc-slate-200: #E2E8F0; /* Bordures inputs (thème + success) */ --pc-slate-210: #e4e7ec; /* Pcards line */ --pc-slate-220: #d6e3f5; /* Plugin cbp border */ --pc-slate-230: #bed1ec; /* Plugin cbp border-strong */ --pc-slate-300: #D0D5DD; /* Pcards line-strong */ --pc-slate-400: #98A2B3; /* Pcards muted dark */ --pc-slate-500: #64748B; /* Texte secondaire (thème + success) */ --pc-slate-550: #667085; /* Pcards muted light */ --pc-slate-600: #475467; --pc-slate-650: #5E6C84; /* Account text-sub */ --pc-slate-700: #5c6f8a; /* Plugin cbp text-soft */ --pc-slate-800: #1E293B; /* Texte principal thème, cta-bg-hover */ --pc-slate-850: #101828; /* Pcards ink (light) */ --pc-slate-870: #111827; /* Pcards surface (dark) */ --pc-slate-900: #0F172A; /* Cta bg, success p-dark */ --pc-slate-940: #0b1220; /* Pcards surface (dark, plus sombre) */ --pc-slate-950: #0b1728; /* Plugin cbp text */ --pc-slate-1000: #050505; /* Account dark bg */ --pc-ink-deep: #1A1A1A; /* Account light text-main */ /* ────────────────────────────────────────────────────────────────────── 4. SÉMANTIQUE — SUCCÈS ────────────────────────────────────────────────────────────────────── */ --pc-green-500: #10b981; /* Vert principal (success page) */ --pc-green-700: #047857; /* Vert sombre (success page) */ --pc-success-bg: #dcfce7; /* Plugin cbp success bg */ --pc-success-text: #166534; /* Plugin cbp success text */ --pc-success-bg-2: #ecfdf3; /* Pcards success bg */ --pc-success-text-2: #067647; /* Pcards success text */ --pc-success-line-2: #abefc6; /* Pcards success line */ /* ────────────────────────────────────────────────────────────────────── 5. SÉMANTIQUE — AVERTISSEMENT ────────────────────────────────────────────────────────────────────── */ --pc-warn-bg: #fff7ed; /* Plugin cbp draft bg */ --pc-warn-text: #9a3412; /* Plugin cbp draft text */ --pc-warn-bg-2: #fffaeb; /* Pcards warning bg */ --pc-warn-text-2: #b54708; /* Pcards warning text */ --pc-warn-line-2: #fedf89; /* Pcards warning line */ /* ────────────────────────────────────────────────────────────────────── 6. SÉMANTIQUE — INFO ────────────────────────────────────────────────────────────────────── */ --pc-info-bg: #eff6ff; /* Pcards blue bg */ --pc-info-line: #bfdbfe; /* Pcards blue line */ --pc-info-soft: #e8f0ff; /* Plugin cbp primary soft */ /* ────────────────────────────────────────────────────────────────────── 7. SURFACES ALPHA (rgba récurrents) ────────────────────────────────────────────────────────────────────── */ --pc-alpha-black-05: rgba(0, 0, 0, 0.05); --pc-alpha-black-06: rgba(0, 0, 0, 0.06); --pc-alpha-black-08: rgba(0, 0, 0, 0.08); --pc-alpha-black-15: rgba(0, 0, 0, 0.15); --pc-alpha-black-50: rgba(0, 0, 0, 0.5); --pc-alpha-white-03: rgba(255, 255, 255, 0.03); --pc-alpha-white-08: rgba(255, 255, 255, 0.08); --pc-alpha-white-10: rgba(255, 255, 255, 0.10); --pc-alpha-white-18: rgba(255, 255, 255, 0.18); --pc-alpha-blue-15: rgba(37, 99, 235, 0.15); --pc-alpha-bluepure-15:rgba(0, 102, 255, 0.15); --pc-alpha-blueneon-30:rgba(41, 98, 255, 0.30); /* ────────────────────────────────────────────────────────────────────── 8. TYPOGRAPHIE ────────────────────────────────────────────────────────────────────── */ --pc-font-head: 'Space Grotesk', sans-serif; --pc-font-body: 'Outfit', sans-serif; /* ────────────────────────────────────────────────────────────────────── 9. RAYONS ────────────────────────────────────────────────────────────────────── */ --pc-radius-sm: 10px; --pc-radius-md: 12px; /* Inputs (thème) + cbp-radius-md */ --pc-radius-lg: 16px; /* cbp-radius-lg */ --pc-radius-xl: 24px; /* radius global + cbp-radius-xl */ --pc-radius-pill: 999px; /* ────────────────────────────────────────────────────────────────────── 10. OMBRES Sources canoniques. Les fichiers feuille les aliasent. ────────────────────────────────────────────────────────────────────── */ --pc-shadow-soft: 0 10px 40px -10px rgba(0, 0, 0, 0.08); --pc-shadow-hover: 0 20px 40px -10px rgba(37, 99, 235, 0.15); --pc-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.05); --pc-shadow-cbp-sm: 0 8px 22px rgba(11, 23, 40, 0.08); --pc-shadow-cbp-md: 0 18px 42px rgba(11, 23, 40, 0.12); --pc-shadow-cbp-lg: 0 28px 64px rgba(11, 23, 40, 0.20); --pc-shadow-cta: 0 14px 30px -12px rgba(15, 23, 42, 0.40); --pc-shadow-cta-hover: 0 22px 36px -14px rgba(15, 23, 42, 0.52); --pc-shadow-account-dark: 0 10px 40px rgba(0, 0, 0, 0.50); /* ────────────────────────────────────────────────────────────────────── 11. STRUCTURE — HEADER ────────────────────────────────────────────────────────────────────── */ --pc-language-bar-height: 0px; --pc-header-main-height: 70px; /* ────────────────────────────────────────────────────────────────────── 12. MOBILE FRAME (aperçu carte de visite) Bezel uniforme appliqué via box-shadow (technique "ring") sur les previews .pcard-device. Cohérent entre vue mosaïque et vue liste, épaisseur ajustée selon la taille du device. ────────────────────────────────────────────────────────────────────── */ --pc-phone-bezel: #25344a; /* Bezel light mode (slate-blue) */ --pc-phone-bezel-dark: #3a4a64; /* Bezel dark mode (plus clair pour rester visible) */ --pc-phone-bezel-thin: 4px; /* Petits previews (liste desktop, mobile) */ --pc-phone-bezel-regular: 5px; /* Mosaïque desktop (proportionnel à 184×368) */ --pc-phone-shadow: 0 16px 28px rgba(8, 17, 31, 0.24); --pc-phone-shadow-compact: 0 12px 22px rgba(12, 22, 36, 0.22); }