/* ============================================================= SOFENA — DESIGN TOKENS Source de vérité unique. Variables CSS pures, zéro framework. Réutilisable par : site vitrine, product-data-synchronizer (Flask/Jinja), et toute autre app Sofena. Extrait de design-system-sofena/src/tokens/*.ts (réf. mars 2026). ============================================================= */ :root { /* =========================================================== COULEURS — Marque =========================================================== */ --color-primary: #479bfe; --color-primary-gradient-start: #046ffc; --color-primary-gradient-end: #72b7ff; --color-accent: #479bfe; /* Gris foncés */ --color-dark-900: #0b0e16; /* fond hero, texte principal */ --color-dark-800: #3a3a3c; --color-dark-700: #2a5d98; /* Gris clairs */ --color-light-100: #ffffff; --color-light-200: #f2f2f5; /* fond canvas */ --color-light-300: #ebebf0; /* bordures subtiles */ --color-light-400: #aec0cc; /* désactivé */ /* =========================================================== COULEURS — Texte =========================================================== */ --color-text-primary: #0b0e16; --color-text-secondary: #707070; --color-text-tertiary: #dddddd; --color-text-inverse: #ffffff; --color-text-muted: #6b7280; /* =========================================================== COULEURS — Surfaces & fonds =========================================================== */ --color-surface-base: #ffffff; --color-surface-elevated: #f2f2f5; --color-surface-muted: #ebebf0; --color-surface-tint: #f5f7ff; --color-surface-overlay: rgba(0, 0, 0, 0.5); --color-bg-light: #ffffff; --color-bg-dark: #0b0e16; --color-bg-muted: #f2f2f5; --color-bg-hero: #0b0e16; /* =========================================================== COULEURS — Bordures =========================================================== */ --color-border-subtle: #ebebf0; --color-border-default: #dddddd; --color-border-strong: #707070; --color-border-accent: #1279fc; /* =========================================================== COULEURS — États / feedback =========================================================== */ --color-focus: #479bfe; --color-hover: #72b7ff; --color-pressed: #2a5d98; --color-disabled: #aec0cc; --color-success: #039855; --color-success-bg: #ecfdf3; --color-success-bg-hover: #d1fadf; --color-error: #d92d20; --color-error-bg: #fef3f2; --color-error-bg-hover: #fee4e2; --color-warning: #b54708; --color-warning-bg: #fffaeb; --color-warning-bg-hover: #fef0c7; --color-info: #0086c9; --color-info-bg: #eff8ff; --color-info-bg-hover: #d1e9ff; /* =========================================================== DÉGRADÉS =========================================================== */ --gradient-primary: linear-gradient(131.73deg, #046ffc 0%, #72b7ff 97.59%); --gradient-horizontal: linear-gradient(90deg, #046ffc 0%, #72b7ff 100%); --gradient-accent: linear-gradient(315deg, #7aa6f4 0%, #426cb7 95.91%); --gradient-subtle: linear-gradient(180deg, rgba(4, 111, 252, 0.08) 0%, rgba(4, 111, 252, 0.02) 100%); /* =========================================================== TYPOGRAPHIE — Familles (Chargées via Google Fonts dans le , pas @import : perf/SEO) =========================================================== */ /* Consolidé à 2 familles (Volkhov + Poppins) pour la perf/SEO. */ --font-volkhov: 'Volkhov', Georgia, serif; --font-poppins: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Aliases sémantiques (par rôle) */ --font-heading: var(--font-volkhov); /* titres hero / sections (décoratif serif) */ --font-subheading: var(--font-poppins); /* titres structurels h4-h6, stats */ --font-ui: var(--font-poppins); /* nav, boutons, labels, h3 */ --font-body: var(--font-poppins); /* paragraphes, corps de texte */ /* =========================================================== TYPOGRAPHIE — Tailles (échelle Figma) =========================================================== */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 22px; --text-3xl: 24px; --text-4xl: 28px; --text-5xl: 36px; --text-6xl: 42px; --text-7xl: 44px; --text-8xl: 48px; /* Heading 1 */ --text-9xl: 64px; --text-10xl: 160px; /* index décoratif (01, 02…) */ /* =========================================================== TYPOGRAPHIE — Graisses & interlignes =========================================================== */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --leading-none: 1; --leading-tight: 1.07; --leading-snug: 1.3; --leading-normal: 1.35; --leading-relaxed: 1.5; --leading-loose: 1.75; /* =========================================================== ESPACEMENTS — Grille 8px (échelle Figma) =========================================================== */ --space-0: 0px; --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px; --space-7: 14px; --space-8: 16px; --space-9: 18px; --space-10: 20px; --space-11: 22px; --space-12: 24px; --space-14: 28px; --space-16: 32px; --space-18: 36px; --space-20: 40px; --space-22: 44px; --space-24: 48px; --space-28: 56px; --space-30: 60px; --space-34: 68px; --space-36: 72px; --space-40: 80px; --space-50: 100px; --space-52: 104px; --space-72: 144px; --space-74: 148px; --space-90: 180px; --space-104: 208px; --space-124: 248px; /* Espacements sémantiques de section */ --section-gap-sm: 40px; --section-gap-md: 80px; --section-gap-lg: 120px; /* =========================================================== RAYONS DE BORDURE =========================================================== */ --radius-none: 0; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-3xl: 32px; --radius-full: 100px; /* pills */ --radius-circle: 50%; /* Presets composants */ --radius-button: 9px; --radius-card: 16px; --radius-input: 8px; /* =========================================================== OMBRES =========================================================== */ --shadow-sm: 0 0 1.11px rgba(0, 0, 0, 0.25); --shadow-md: 0 0.41px 2.43px rgba(0, 0, 0, 0.21); --shadow-lg: 0 0.53px 3.2px rgba(0, 0, 0, 0.21); --shadow-xl: 4px 8px 24px rgba(242, 242, 245, 1); --shadow-card: 4px 8px 24px rgba(242, 242, 245, 1); --shadow-button: 0 24px 52px rgba(4, 111, 252, 0.28); --shadow-button-hover: 0 30px 60px rgba(4, 111, 252, 0.32); --shadow-button-pressed: 0 18px 38px rgba(4, 111, 252, 0.26); --shadow-focus: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 6px rgba(4, 111, 252, 0.45); /* =========================================================== LAYOUT (ajouté pour le site — pas dans le DS d'origine) =========================================================== */ --container-max: 1280px; --container-padding: 24px; }