/*
* careXpat — Design Tokens
* Source de vérité partagée pour toutes les pages site-web.
*
* Usage :
* (depuis une sous-page)
* (depuis site-web/)
*
* Ce fichier ne contient que des @font-face et des variables CSS :root.
* Pas de classes, pas de composants. Uniquement les fondations.
*
* Référence visuelle : design-system.html
*/
/* ─────────────────────────────────────────────────────────
FONTS — polices locales, fallbacks Google Fonts
Le fallback Google doit rester importé dans chaque :
⚠️ Sugo Pro Classic et Ease SemiRounded ne sont fournies qu'en
Regular (400) et Bold (700). Toute autre graisse est synthétisée
par le fallback (Oswald / Onest) — voir --fw-* plus bas.
───────────────────────────────────────────────────────── */
/* Sugo Pro Classic — titres, headings, uppercase obligatoire */
@font-face {
font-family: 'Sugo Pro Classic';
src: url('fonts/SugoPro-Regular.woff2') format('woff2'),
url('fonts/SugoPro-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Ease SemiRounded Regular — corps de texte, labels, UI */
@font-face {
font-family: 'Ease SemiRounded';
src: url('fonts/EaseSemiRounded-Regular.woff2') format('woff2'),
url('fonts/EaseSemiRounded-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Ease SemiRounded Bold — emphases, labels forts */
@font-face {
font-family: 'Ease SemiRounded';
src: url('fonts/EaseSemiRounded-Bold.woff2') format('woff2'),
url('fonts/EaseSemiRounded-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* ─────────────────────────────────────────────────────────
DESIGN TOKENS
───────────────────────────────────────────────────────── */
:root {
/* ── Palette de marque ───────────────────────────────── */
--lime: #dbdb19; /* Signature identité — CTA interactifs, focus ring */
--black: #000000; /* Typo, boutons, règles fines */
--white: #ffffff; /* Fonds clairs, contrastes */
--violet: #d19cff; /* Palette principale — sections, blocs, badges */
--orange: #ff7d12; /* Palette principale — sections, blocs, badges */
--cyan: #7cd0d8; /* Palette principale — sections, blocs, badges */
--bg: #f4f4f2; /* Fond body / outer wrapper */
--grey: #424242; /* Texte secondaire (valeur pleine) */
/* ── Variantes sombres (hover, texte sur tint) ───────── */
--lime-dark: #b5b116; /* Hover sur lime, texte sur lime-tint */
--violet-dark: #9969d6; /* Hover sur violet, texte sur tint */
--orange-dark: #ef6d0c; /* Hover sur orange, texte sur tint */
--cyan-dark: #53b7bc; /* Hover sur cyan, texte sur tint */
/* ── Tints sémantiques (fonds doux) ──────────────────── */
--lime-tint: rgba(219, 219, 25, 0.10);
--violet-tint: rgba(209, 156, 255, 0.12);
--orange-tint: rgba(255, 125, 18, 0.09);
--cyan-tint: rgba(124, 208, 216, 0.14);
/* ── Fonctionnel (hors palette marque) ───────────────── */
--error: #e53e3e; /* Validation — erreurs uniquement */
--success: #22c55e; /* Validation — succès uniquement */
/* ── Texte (couleurs) ────────────────────────────────── */
--text-1: #000000; /* Corps principal */
--text-2: rgba(0,0,0,0.55); /* Texte secondaire */
--text-3: rgba(0,0,0,0.35); /* Sous-textes, metadata */
/* ── Bordures ────────────────────────────────────────── */
--border: rgba(0,0,0,0.08);
--border-mid: rgba(0,0,0,0.14);
--border-strong: rgba(0,0,0,0.22);
/* ── Familles typographiques ─────────────────────────── */
--font-title: 'Sugo Pro Classic', 'Oswald', sans-serif;
--font-body: 'Ease SemiRounded', 'Onest', sans-serif;
/* ── Graisses ────────────────────────────────────────── */
/* 400 et 700 = vraies graisses Ease SemiRounded. */
/* 600 = SemiBold via le fallback Onest (CTA, labels forts) */
--fw-regular: 400; /* @kind font */
--fw-semibold: 600; /* @kind font */
--fw-bold: 700; /* @kind font */
/* ── Tailles de texte ────────────────────────────────── */
/* Corps & UI (Ease SemiRounded) */
--fs-micro: 10px; /* Labels de champ, badges */
--fs-eyebrow: 11px; /* Suréclats, micro-labels uppercase */
--fs-xs: 12px; /* Metadata, mentions, liens discrets */
--fs-sm: 13px; /* UI dense, boutons */
--fs-base: 15px; /* Corps de texte par défaut */
--fs-input: 16px; /* Champs de saisie — minimum iOS */
--fs-lg: 18px; /* Texte d'accroche */
/* Titres (Sugo Pro Classic — toujours uppercase) */
--fs-title-s: 22px; /* Titre de bloc */
--fs-title-m: 28px; /* Titre de section */
--fs-title-l: 34px; /* Titre de page */
--fs-title-xl: 46px; /* Hero */
/* ── Interlignage (brand book) ──────────────────────── */
--lh-tight: 0.96; /* @kind font */ /* Display headlines, Sugo Pro Classic */
--lh-snug: 1.1; /* @kind font */ /* Subheads, Ease SemiRounded */
--lh-base: 1.18; /* @kind font */ /* Corps de texte, Ease SemiRounded */
--lh-relaxed: 1.5; /* @kind font */ /* Paragraphes longs */
/* ── Espacements (échelle 4px) ───────────────────────── */
--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-30: 120px;
/* ── Rayons ──────────────────────────────────────────── */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-2xl: 28px;
--radius-pill: 100px;
/* Alias courts */
--r-xs: var(--radius-xs);
--r-sm: var(--radius-sm);
--r-md: var(--radius-md);
--r-lg: var(--radius-lg);
--r-xl: var(--radius-xl);
--r-2xl: var(--radius-2xl);
--r-pill: var(--radius-pill);
/* ── Ombres ──────────────────────────────────────────── */
--shadow-xs: 0 1px 3px rgba(0,0,0,0.08); /* Tags, chips, inputs */
--shadow-sm: 0 2px 8px rgba(0,0,0,0.08); /* Cartes au repos */
--shadow-md: 0 4px 24px rgba(0,0,0,0.10); /* Cartes mises en avant */
--shadow-lg: 0 8px 32px rgba(0,0,0,0.14); /* Hover, dropdowns */
--shadow-xl: 0 20px 48px rgba(0,0,0,0.18); /* Modales, surfaces hautes */
--shadow-nav: 0 1px 0 rgba(0,0,0,0.07); /* Barre de navigation */
--shadow-lift: 0 4px 16px rgba(0,0,0,0.12); /* Élévation au survol */
--shadow-focus: 0 0 0 3px rgba(219,219,25,0.55); /* Focus ring accessible */
/* ── Z-index ─────────────────────────────────────────── */
--z-base: 1; /* @kind other */
--z-sticky: 10; /* @kind other */
--z-nav: 50; /* @kind other */
--z-modal: 200; /* @kind other */
--z-toast: 300; /* @kind other */
/* ── Transitions ─────────────────────────────────────── */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
--t-fast: 0.15s ease; /* @kind other */
--t-mid: 0.22s ease; /* @kind other */
--t-slow: 0.38s cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
/* ── Layout ──────────────────────────────────────────── */
--nav-h: 64px; /* @kind spacing */
--sidebar-w: 276px; /* @kind spacing */
}
/* ─────────────────────────────────────────────────────────
FONT RENDERING — rendu plus fin sur écran
───────────────────────────────────────────────────────── */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ─────────────────────────────────────────────────────────
REDUCED MOTION
───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition: none !important;
animation: none !important;
}
}