/* ========================================================================== DESIGN TOKENS — Lumea, plateforme de gestion scolaire (Bénin) Charte "Lumière" — v1.0 Fichier unique de vérité. Aucune valeur en dur ailleurs dans le CSS. ========================================================================== */ /* Sous-ensemble latin + latin-ext obligatoire (prénoms accentués : Fênou, Ayélé). */ /* --- Police -------------------------------------------------------------- */ /* */ :root { /* ====================================================================== 1. COULEURS — RAMPES BRUTES (ne jamais utiliser directement en composant) ====================================================================== */ /* Jaune (Primary) */ --yellow-50: #FFFDF2; --yellow-100: #FFF9DA; --yellow-200: #FFF3B4; --yellow-300: #FFEE8F; --yellow-400: #FFE969; /* ⭐ PRIMARY */ --yellow-500: #EAD24C; --yellow-600: #C0A92E; --yellow-700: #8E7C1B; --yellow-800: #5A5810; /* Olive — fond des boutons "Primary" */ --yellow-900: #302E06; /* Encre (Secondary) */ --ink-900: #121212; /* ⭐ SECONDARY */ --ink-800: #1F1F1E; --ink-700: #2E2E2B; --ink-600: #45443F; --ink-500: #5C5A54; /* texte secondaire — contraste AA sur crème */ --ink-400: #7B776B; /* ⭐ NEUTRAL — texte tertiaire, gros calibre only */ --ink-300: #A9A69B; --ink-200: #CFCCC2; --ink-100: #E7E4D9; --ink-50: #F4F1E3; /* Crème (Tertiary) */ --cream-0: #FFFFFF; --cream-50: #FDFBF0; /* ⭐ TERTIARY — fond de page */ --cream-100: #F7F4E7; --cream-200: #EDE9D9; --cream-300: #E2DDC9; /* Sémantiques */ --green-500: #2E7D4F; --green-50: #E8F3EC; --orange-500: #C77B12; --orange-50: #FBF1E1; --red-500: #C7362B; /* destructif / urgence fuite */ --red-50: #FAEBE9; --blue-500: #2F6B8F; --blue-50: #E9F1F6; /* ====================================================================== 2. COULEURS — ALIAS SÉMANTIQUES (à utiliser dans les composants) ====================================================================== */ /* Surfaces */ --surface-page: var(--cream-50); --surface-raised: var(--cream-0); --surface-muted: var(--ink-50); --surface-band: var(--cream-200); --surface-inverted: var(--ink-900); --surface-accent: var(--yellow-400); --surface-accent-soft: var(--yellow-100); /* Texte */ --text-primary: var(--ink-900); --text-secondary: var(--ink-500); --text-tertiary: var(--ink-400); /* ≥ 18px/600 uniquement */ --text-on-dark: var(--cream-50); --text-on-dark-muted: #A6A29A; --text-on-accent: var(--ink-900); /* JAMAIS de blanc sur jaune */ --text-brand: var(--yellow-800); --text-danger: var(--red-500); --text-success: var(--green-500); /* Bordures */ --border-hairline: rgba(18, 18, 18, 0.08); --border-soft: rgba(18, 18, 18, 0.14); --border-strong: rgba(18, 18, 18, 0.90); --border-on-dark: rgba(253, 251, 240, 0.14); --border-focus: var(--yellow-800); /* Halos — élément signature. Dégradés CSS, jamais d'image. */ --halo-light: radial-gradient(60% 60% at 50% 40%, rgba(255,233,105,.55) 0%, rgba(255,233,105,.16) 45%, rgba(255,233,105,0) 72%); --halo-dark: radial-gradient(60% 60% at 50% 40%, rgba(255,233,105,.30) 0%, rgba(255,233,105,.08) 48%, rgba(255,233,105,0) 75%); /* ====================================================================== 3. TYPOGRAPHIE ====================================================================== */ --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; /* Graisses */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; /* Échelle fluide — min 360px → max 1440px */ --fs-display: clamp(2.50rem, 1.35rem + 5.10vw, 4.50rem); /* 40 → 72 */ --fs-h1: clamp(2.13rem, 1.45rem + 3.00vw, 3.50rem); /* 34 → 56 */ --fs-h2: clamp(1.75rem, 1.28rem + 2.10vw, 2.75rem); /* 28 → 44 */ --fs-h3: clamp(1.38rem, 1.13rem + 1.10vw, 2.00rem); /* 22 → 32 */ --fs-h4: clamp(1.19rem, 1.08rem + 0.48vw, 1.50rem); /* 19 → 24 */ --fs-lead: clamp(1.06rem, 0.99rem + 0.32vw, 1.25rem); /* 17 → 20 */ --fs-body-lg: 1.125rem; /* 18 */ --fs-body: 1rem; /* 16 */ --fs-body-sm: 0.9375rem; /* 15 */ --fs-caption: 0.8125rem; /* 13 */ --fs-label: 0.8125rem; /* 13 — MAJ + tracking */ --fs-micro: 0.75rem; /* 12 */ /* Interlignes */ --lh-tight: 1.04; --lh-heading: 1.16; --lh-snug: 1.35; --lh-body: 1.62; --lh-loose: 1.75; /* Interlettrage */ --ls-display: -0.035em; --ls-heading: -0.022em; --ls-snug: -0.01em; --ls-body: 0em; --ls-label: 0.08em; /* Longueur de ligne */ --measure-tight: 22ch; --measure-lead: 46ch; --measure-body: 68ch; /* ====================================================================== 4. ESPACEMENT — base 4px ====================================================================== */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --space-30: 7.5rem; /* 120 */ --space-40: 10rem; /* 160 */ /* Rythme vertical des sections */ --section-y: clamp(4rem, 2.2rem + 8vw, 7.5rem); /* 64 → 120 */ --section-y-lg: clamp(5rem, 2.5rem + 11vw, 10rem); /* 80 → 160 */ --stack-heading: var(--space-5); /* titre → chapô */ --stack-block: var(--space-10); /* chapô → contenu */ /* ====================================================================== 5. LAYOUT ====================================================================== */ --container-max: 1240px; --container-narrow: 780px; --container-wide: 1440px; --gutter: clamp(1.25rem, 0.6rem + 2.8vw, 3rem); /* 20 → 48 */ --grid-gap: clamp(1rem, 0.6rem + 1.6vw, 2rem); /* 16 → 32 */ --shell-inset: clamp(0px, -1rem + 4vw, 1rem); /* marge du cadre */ /* Breakpoints (référence — à écrire en dur dans les @media) */ /* xs 480 | sm 640 | md 768 | lg 1024 | xl 1280 | 2xl 1440 */ /* ====================================================================== 6. RAYONS ====================================================================== */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 36px; --radius-3xl: 44px; --radius-pill: 999px; /* ====================================================================== 7. OMBRES — chaudes, teintées encre, jamais noires pures ====================================================================== */ --shadow-none: none; --shadow-xs: 0 1px 2px rgba(18, 18, 18, 0.05); --shadow-sm: 0 2px 6px -1px rgba(18, 18, 18, 0.06), 0 1px 2px rgba(18, 18, 18, 0.04); --shadow-md: 0 8px 24px -8px rgba(18, 18, 18, 0.10), 0 2px 6px -2px rgba(18, 18, 18, 0.06); --shadow-lg: 0 20px 48px -16px rgba(18, 18, 18, 0.14), 0 6px 14px -8px rgba(18, 18, 18, 0.08); --shadow-xl: 0 40px 80px -24px rgba(18, 18, 18, 0.18), 0 12px 24px -12px rgba(18, 18, 18, 0.08); --shadow-accent: 0 14px 34px -14px rgba(144, 126, 27, 0.55); --shadow-inset-hairline: inset 0 0 0 1px rgba(18, 18, 18, 0.06); /* ====================================================================== 8. MOTION ====================================================================== */ --dur-instant: 120ms; --dur-fast: 180ms; --dur-base: 240ms; --dur-slow: 400ms; --dur-reveal: 620ms; --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --stagger: 60ms; /* ====================================================================== 9. DIVERS ====================================================================== */ --focus-ring: 0 0 0 3px var(--surface-page), 0 0 0 5px var(--yellow-800); --backdrop-blur: saturate(180%) blur(14px); --header-h: 76px; --z-base: 0; --z-sticky: 100; --z-header: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* ========================================================================== RESET MINIMAL + BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-primary); background: var(--surface-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }