/* ========================================================================== tokens.css — Jetons de conception (design tokens) -------------------------------------------------------------------------- Source unique de vérité pour les couleurs, la typographie et les espacements. Aucune règle de style ici : uniquement des variables CSS. Pourquoi séparer ? Changer l'identité visuelle du site ne doit demander la modification que d'un seul fichier. Toute valeur littérale (#05BC8A, 1.5rem…) écrite ailleurs que dans ce fichier est une dette technique. ========================================================================== */ /* -------------------------------------------------------------------------- ORDRE DE CASCADE Déclaré ici en premier, avant toute règle. Une couche listée plus bas l'emporte sur celles du dessus, quelle que soit la spécificité des sélecteurs et quel que soit l'ordre des balises dans le . Cela supprime la cause n°1 des conflits CSS : la course à la spécificité. -------------------------------------------------------------------------- */ @layer tokens, base, layout, components, utilities; @layer tokens { :root { /* ==================================================================== COULEURS Palette volontairement restreinte. Contrastes vérifiés WCAG 2.1 : - ink sur bg : 14,8:1 (AAA, seuil 7:1) - ink-soft sur bg : 7,4:1 (AAA) - ink-faint sur bg : 4,1:1 (AA sur texte non essentiel ≥ 14px) - accent-dark sur bg : 4,3:1 (AA, utilisé pour les liens) L'accent pur (#05BC8A) n'est jamais utilisé pour du texte sur fond clair : son contraste (2,3:1) est insuffisant. Il sert uniquement de couleur de trait, de bordure et de puce décorative. ==================================================================== */ /* ---- Surfaces ---- */ --color-bg: #f7f8f8; /* Fond de page */ --color-bg-translucent: rgb(247 248 248 / 85%); /* En-tête collant */ --color-surface: #ffffff; /* Cartes, fiches */ --color-surface-alt: #f1f3f3; /* Surfaces secondaires, badges neutres */ /* ---- Lignes ---- */ --color-line: #e3e6e6; /* Séparateurs, bordures de cartes */ --color-line-strong: #cfd4d4; /* Bordures nécessitant plus de présence */ /* ---- Texte ---- */ --color-ink: #10201c; /* Titres, texte principal */ --color-ink-soft: #4c5a56; /* Corps de texte, descriptions */ --color-ink-faint: #7b8783; /* Métadonnées, mentions secondaires */ --color-ink-inverse: #f7f8f8; /* Texte sur fond sombre */ /* ---- Accent : identité underscorelab ---- */ --color-accent: #05bc8a; /* Traits, puces, bordures */ --color-accent-dark: #03996f; /* Texte et liens (contraste AA) */ --color-accent-wash: #eafaf4; /* Fond de badge */ --color-accent-border: rgb(5 188 138 / 28%); --color-accent-glow: rgb(5 188 138 / 12%); /* ---- États ---- */ --color-focus: #03996f; /* Anneau de focus clavier */ /* ==================================================================== TYPOGRAPHIE Deux familles seulement : - JetBrains Mono : titres, métadonnées, éléments d'interface. Choisie parce que c'est une police de développeur — le sujet du site est l'informatique, la forme dit la même chose que le fond. - Inter : corps de texte. Optimisée pour la lecture à l'écran, hauteur d'x généreuse. Les piles de repli listent des polices système présentes partout, pour que la page reste lisible avant le chargement des webfonts. ==================================================================== */ --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* ---- Échelle typographique fluide ---- clamp(min, préféré, max) : la taille s'adapte à la largeur du viewport sans point de rupture. Le terme central mêle rem (respecte le zoom utilisateur et la taille de police du navigateur) et vw (fluidité). Un vw seul casserait l'accessibilité : le zoom n'aurait plus d'effet. */ --text-2xs: 0.7rem; --text-xs: 0.75rem; --text-sm: 0.85rem; --text-base: 1rem; --text-md: clamp(1rem, 0.96rem + 0.2vw, 1.1rem); --text-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); --text-xl: clamp(1.35rem, 1.15rem + 1vw, 1.75rem); --text-2xl: clamp(2.1rem, 1.5rem + 3vw, 3.4rem); /* ---- Graisses ---- */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---- Interlignes ---- */ --leading-tight: 1.15; /* Grands titres */ --leading-snug: 1.4; /* Sous-titres */ --leading-normal: 1.7; /* Corps de texte : confort de lecture */ /* ==================================================================== ESPACEMENTS Échelle géométrique basée sur 0,25rem (4px). Utiliser une échelle plutôt que des valeurs arbitraires produit un rythme vertical cohérent sur toute la page. ==================================================================== */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4.5rem; /* ==================================================================== DIMENSIONS ==================================================================== */ --width-content: 60rem; /* Largeur maximale du contenu */ --width-prose: 68ch; /* ~68 caractères : optimum de lisibilité (au-delà, l'œil perd la ligne au retour) */ --gutter: clamp(1rem, 4vw, 1.5rem); /* Marge latérale fluide */ --header-height: 3.5rem; /* Sert au calcul du scroll-padding */ --tap-target: 2.75rem; /* 44px : cible tactile minimale (WCAG 2.5.5) */ /* ---- Rayons ---- */ --radius-sm: 3px; --radius-md: 6px; --radius-full: 999px; /* ---- Ombres : très légères, le design repose sur les bordures ---- */ --shadow-sm: 0 1px 2px rgb(16 32 28 / 4%); --shadow-md: 0 4px 12px rgb(16 32 28 / 6%); /* ---- Transitions ---- */ --transition-fast: 150ms ease; --transition-base: 200ms ease; /* ---- Plans d'empilement : centralisés pour éviter la surenchère de z-index dispersés dans le code ---- */ --z-sticky: 100; --z-overlay: 150; --z-skip-link: 200; } }