/* ========================================================================== Jetons de design — la seule source de vérité pour les couleurs, la typo et les espacements. Aucune valeur brute ne doit apparaître dans main.css. Le thème sombre ne redéfinit que les couleurs. Tout le reste — échelles, rythme, rayons, durées — est commun aux deux : c'est ce qui garantit que le site est le même objet dans les deux ambiances. ========================================================================== */ :root { /* --- Familles ------------------------------------------------------- */ /* Fira Code : titres, interface, code, chiffres. */ --iron-font-mono: 'Fira Code', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', Menlo, Consolas, monospace; /* Fira Sans : prose longue. */ --iron-font-sans: 'Fira Sans', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* --- Échelle typographique ------------------------------------------ */ --iron-t-2xs: 0.6875rem; /* 11px — étiquettes, index */ --iron-t-xs: 0.75rem; /* 12px — surtitres, méta */ --iron-t-sm: 0.8125rem; /* 13px — code, légendes */ --iron-t-base: 1rem; /* 16px — corps */ --iron-t-md: 1.0625rem; /* 17px — corps long */ --iron-t-lg: 1.1875rem; /* 19px — chapeau */ --iron-t-xl: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem); --iron-t-2xl: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem); --iron-t-3xl: clamp(1.875rem, 1.3rem + 2.4vw, 2.875rem); --iron-t-hero: clamp(2.25rem, 1.25rem + 4.2vw, 4.25rem); --iron-lh-tight: 1.08; --iron-lh-snug: 1.3; --iron-lh-base: 1.65; --iron-lh-loose: 1.78; /* La chasse fixe a besoin d'être resserrée dès qu'elle grossit. */ --iron-ls-hero: -0.04em; --iron-ls-head: -0.025em; --iron-ls-caps: 0.12em; /* --- Rythme vertical et horizontal ---------------------------------- */ --iron-s-1: 0.25rem; --iron-s-2: 0.5rem; --iron-s-3: 0.75rem; --iron-s-4: 1rem; --iron-s-5: 1.5rem; --iron-s-6: 2rem; --iron-s-7: 2.75rem; --iron-s-8: 4rem; --iron-s-9: 6rem; --iron-s-10: 8rem; --iron-section: clamp(4.5rem, 3rem + 7vw, 8.5rem); --iron-gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem); --iron-wrap: 76rem; /* 1216px */ --iron-prose: 40rem; /* longueur de ligne confortable en prose */ /* --- Formes ---------------------------------------------------------- */ /* Presque droit. Ironframe est un cadre, pas un coussin. */ --iron-r-sm: 2px; --iron-r-md: 4px; --iron-r-lg: 6px; --iron-hairline: 1px; /* --- Mouvement -------------------------------------------------------- */ --iron-fast: 120ms; --iron-mid: 240ms; --iron-slow: 480ms; --iron-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --iron-snap: cubic-bezier(0.16, 1, 0.3, 1); /* --- Couleurs, thème clair ------------------------------------------- */ /* Un blanc cassé tirant vers le gris chaud : moins agressif qu'un #FFF, et il fait ressortir le vert acide sans le rendre criard. */ --iron-bg: #F1F1EC; --iron-bg-alt: #E9E9E2; --iron-surface: #FBFBF8; --iron-surface-alt: #F6F6F1; --iron-ink: #16171A; --iron-ink-soft: #55585E; --iron-ink-faint: #83868C; --iron-line: #DBDBD2; --iron-line-strong: #C3C3B7; /* Le vert acide n'est JAMAIS du texte sur fond clair : son contraste sur blanc est de 1,3:1. Il est un fond, un filet ou un marqueur. */ --iron-accent: #D5FF00; --iron-accent-deep: #A8CC00; /* variante lisible en texte, 3,4:1 mini */ --iron-on-accent: #0D0E09; --iron-accent-wash: rgba(213, 255, 0, 0.18); /* Le seul écart au duo neutre + vert : les encadrés « attention » de la documentation. Un piège qui coûte une demi-journée mérite une couleur que le vert acide ne sait pas dire. */ --iron-warn: #B4700A; --iron-warn-wash: rgba(214, 145, 30, 0.12); --iron-code-bg: #16171A; --iron-code-ink: #E4E5DF; --iron-shadow: 0 1px 2px rgba(20, 21, 18, 0.05), 0 8px 24px -12px rgba(20, 21, 18, 0.16); --iron-shadow-lift: 0 2px 4px rgba(20, 21, 18, 0.06), 0 18px 40px -18px rgba(20, 21, 18, 0.28); } /* --- Couleurs, thème sombre ---------------------------------------------- */ /* Deux sélecteurs, un seul jeu de valeurs : la préférence système s'applique par défaut, et l'attribut posé par le sélecteur du site la surclasse dans les deux sens. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --iron-bg: #0C0D0F; --iron-bg-alt: #101215; --iron-surface: #141619; --iron-surface-alt: #1A1D21; --iron-ink: #E9EAE4; --iron-ink-soft: #9A9DA5; --iron-ink-faint: #6B6E77; --iron-line: #24272C; --iron-line-strong: #383C43; --iron-accent: #D5FF00; --iron-accent-deep: #D5FF00; /* sur fond sombre, il est lisible tel quel */ --iron-on-accent: #0D0E09; --iron-accent-wash: rgba(213, 255, 0, 0.12); --iron-warn: #E0A83A; --iron-warn-wash: rgba(224, 168, 58, 0.14); --iron-code-bg: #0A0B0D; --iron-code-ink: #E4E5DF; --iron-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.7); --iron-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.55), 0 18px 40px -18px rgba(0, 0, 0, 0.85); } } :root[data-theme='dark'] { --iron-bg: #0C0D0F; --iron-bg-alt: #101215; --iron-surface: #141619; --iron-surface-alt: #1A1D21; --iron-ink: #E9EAE4; --iron-ink-soft: #9A9DA5; --iron-ink-faint: #6B6E77; --iron-line: #24272C; --iron-line-strong: #383C43; --iron-accent: #D5FF00; --iron-accent-deep: #D5FF00; --iron-on-accent: #0D0E09; --iron-accent-wash: rgba(213, 255, 0, 0.12); --iron-warn: #E0A83A; --iron-warn-wash: rgba(224, 168, 58, 0.14); --iron-code-bg: #0A0B0D; --iron-code-ink: #E4E5DF; --iron-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.7); --iron-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.55), 0 18px 40px -18px rgba(0, 0, 0, 0.85); }