/* ============================================================ SHOPITECH — DESIGN TOKENS Source de vérité des jetons de design, en variables CSS. Utilisation dans Blocksy : tape « var(--st-accent) » dans n'importe quel champ couleur/taille du builder. Utilisation en CSS custom : idem, partout. Principe Bible §10 : Noir + Blanc + UN SEUL accent à la fois. ============================================================ */ :root { /* --------------------------------------------------------- 1. COULEURS DE MARQUE (Bible §10) --------------------------------------------------------- */ --st-noir: #0E0E12; /* fond principal */ --st-blanc: #FFFFFF; /* texte / surfaces claires */ /* ---- ACCENT : UN SEUL actif ---------------------------- Défaut = cobalt. Pour basculer sur l'ambre, commente les 3 lignes cobalt et décommente les 3 lignes ambre. C'est le SEUL endroit à changer dans tout le projet. */ /* Cobalt (défaut) */ --st-accent: #3B6DF6; --st-accent-hover: #2E5AE0; /* -12% clarté, pour :hover/:active */ --st-on-accent: #FFFFFF; /* texte posé SUR l'accent */ /* Ambre (variante) — décommenter pour basculer : --st-accent: #E8A33D; --st-accent-hover: #D18F2A; --st-on-accent: #0E0E12; */ /* Accent en filigrane (halos, focus, fonds subtils) */ --st-accent-soft: color-mix(in srgb, var(--st-accent) 14%, transparent); --st-accent-ring: color-mix(in srgb, var(--st-accent) 45%, transparent); /* --------------------------------------------------------- 2. NEUTRES DÉRIVÉS DU NOIR (élévations en UI sombre) Du fond le plus profond vers les surfaces qui « montent ». --------------------------------------------------------- */ --st-bg: var(--st-noir); /* page */ --st-surface-1: #16161C; /* cartes, panneaux */ --st-surface-2: #1E1E26; /* champs, éléments élevés */ --st-surface-3: #2A2A34; /* survol de surface, hover de carte */ --st-border: rgba(255, 255, 255, 0.08); /* séparateurs discrets */ --st-border-strong: rgba(255, 255, 255, 0.16); /* bordures marquées */ /* --------------------------------------------------------- 3. TEXTE (sur fond sombre) --------------------------------------------------------- */ --st-text: #F5F5F7; /* texte principal (blanc cassé, moins agressif) */ --st-text-muted: #A0A0AC; /* texte secondaire */ --st-text-subtle: #6E6E7A; /* légendes, méta, placeholders */ --st-text-invert: #0E0E12; /* texte sur surfaces claires */ /* --------------------------------------------------------- 4. ÉTATS SÉMANTIQUES (utile pour le checkout : stock, paiement…) --------------------------------------------------------- */ --st-success: #2FBF71; /* en stock, paiement OK */ --st-warning: #E8A33D; /* attention / en attente */ --st-danger: #F0524B; /* rupture, erreur */ --st-info: #3B6DF6; /* --------------------------------------------------------- 5. TYPOGRAPHIE --------------------------------------------------------- */ --st-font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --st-fw-light: 300; --st-fw-regular: 400; --st-fw-medium: 500; --st-fw-semibold: 600; --st-fw-bold: 700; /* Échelle typographique (mobile-first, en rem) */ --st-text-xs: 0.75rem; /* 12 */ --st-text-sm: 0.875rem; /* 14 */ --st-text-base: 1rem; /* 16 — base lisible mobile */ --st-text-lg: 1.125rem; /* 18 */ --st-text-xl: 1.25rem; /* 20 */ --st-text-2xl: 1.5rem; /* 24 */ --st-text-3xl: 1.875rem; /* 30 */ --st-text-4xl: 2.25rem; /* 36 */ --st-text-5xl: 3rem; /* 48 — hero desktop */ --st-leading-tight: 1.15; /* titres */ --st-leading-snug: 1.35; --st-leading-normal: 1.6; /* corps */ --st-tracking-tight: -0.02em; /* gros titres premium (un peu resserrés) */ --st-tracking-wide: 0.04em; /* labels, sur-titres en capitales */ /* --------------------------------------------------------- 6. ESPACEMENT (base 4px) --------------------------------------------------------- */ --st-space-1: 0.25rem; /* 4 */ --st-space-2: 0.5rem; /* 8 */ --st-space-3: 0.75rem; /* 12 */ --st-space-4: 1rem; /* 16 */ --st-space-5: 1.5rem; /* 24 */ --st-space-6: 2rem; /* 32 */ --st-space-7: 3rem; /* 48 */ --st-space-8: 4rem; /* 64 */ --st-space-9: 6rem; /* 96 — respirations de section */ /* --------------------------------------------------------- 7. RAYONS --------------------------------------------------------- */ --st-radius-sm: 6px; --st-radius-md: 10px; /* cartes produits, champs */ --st-radius-lg: 16px; --st-radius-xl: 24px; --st-radius-full: 999px; /* pilules, badges, avatars */ /* --------------------------------------------------------- 8. OMBRES (discrètes sur fond sombre + option halo accent) --------------------------------------------------------- */ --st-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --st-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --st-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55); --st-glow-accent: 0 0 0 1px var(--st-accent-ring), 0 8px 30px color-mix(in srgb, var(--st-accent) 25%, transparent); /* --------------------------------------------------------- 9. MOUVEMENT --------------------------------------------------------- */ --st-dur-fast: 120ms; --st-dur-base: 200ms; --st-dur-slow: 400ms; --st-ease: cubic-bezier(0.4, 0, 0.2, 1); /* --------------------------------------------------------- 10. GABARIT / LAYOUT --------------------------------------------------------- */ --st-container: 1200px; /* largeur max du contenu */ --st-container-narrow: 760px; /* colonnes de lecture / formulaires */ --st-gutter: 1.25rem; /* marge latérale mobile */ /* --------------------------------------------------------- 11. Z-INDEX (échelle cohérente pour drawer panier, banner, modales) --------------------------------------------------------- */ --st-z-base: 1; --st-z-sticky: 100; /* banner d'annonce sticky (réf. dijo) */ --st-z-header: 200; --st-z-drawer: 300; /* cart drawer */ --st-z-modal: 400; --st-z-toast: 500; }