/* Jetons du design system. * * UNE seule déclaration par jeton, pour les deux thèmes, grâce à light-dark(). * Avant, les valeurs sombres étaient recopiées à la main dans deux blocs de * trente lignes identiques : toute retouche devait être faite deux fois, et * l'oubli ne se voyait que dans un thème. * * light-dark() demande Safari 17.5+ / Chrome 123+ / Firefox 120+. La feuille * emploie déjà color-mix() (mêmes générations de navigateurs) pour les couleurs * Tempo : la contrainte n'est donc pas nouvelle. * * Le thème suit la préférence système, sauf choix explicite posé par le script * de thème sur . */ :root { color-scheme: light dark; /* ---------------------------------------------------------------- surfaces */ --bg: light-dark(#EFEAE0, #0C1628); --surface: light-dark(#FBF8F3, #14213A); --surface-2: light-dark(#E6DFD2, #1C2B49); --border: light-dark(#DAD2C4, #26355A); --text: light-dark(#14213A, #EFEAE0); --text-2: light-dark(#4A5A75, #A8B2C4); --text-3: light-dark(#545F73, #8893A7); /* ------------------------------------------------------------------ accent */ --accent: light-dark(#B4713A, #C4854E); --accent-fg: light-dark(#FBF8F3, #0C1628); --accent-soft: light-dark(#F3E4D5, #33241A); /* Couleur d'accent utilisable pour du TEXTE : sur fond clair, l'accent des aplats n'a pas toujours le contraste exigé pour de petits caractères. */ --accent-ink: light-dark(#8A5226, #C4854E); /* ------------------------------------------------------- couleurs Tempo Chaque couleur a un fond, un texte et un solide (graphes, barres). */ --tempo-bleu-bg: light-dark(#DCE6F5, #12283F); --tempo-bleu-fg: light-dark(#0B4C9E, #8CC0FF); --tempo-bleu-solid: light-dark(#2f7de1, #3b82e0); --tempo-blanc-bg: light-dark(#E9E4DA, #262B33); --tempo-blanc-fg: light-dark(#3F4A5E, #C8CFD9); --tempo-blanc-solid: light-dark(#9AA3B4, #8B93A1); --tempo-rouge-bg: light-dark(#FBDDDF, #3B1815); --tempo-rouge-fg: light-dark(#A81028, #FF9AA0); --tempo-rouge-solid: light-dark(#C41E3A, #C41E3A); /* --------------------------------------------------------------- états Quatre tons, et QUATRE seulement : info, succès, avertissement, danger. Les pages en inventaient chacune un jeu ; il n'y en a plus qu'un. */ --info-bg: var(--tempo-bleu-bg); --info-fg: var(--tempo-bleu-fg); --succes-bg: light-dark(#DDEDE4, #122C22); --succes-fg: light-dark(#1A6B50, #3FBF8E); --warn-bg: light-dark(#F7E9CE, #33270E); --warn-fg: light-dark(#7A5312, #E8B45A); --danger-bg: light-dark(#FBDDDF, #3B1815); --danger-fg: light-dark(#A81028, #FF9AA0); /* ------------------------------------------------------------ typographie Aucune taille de police en dur ailleurs que dans cette feuille : c'est ce qui a produit onze définitions maison du même « grand chiffre ». */ --font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --t-micro: 11px; /* étiquettes de la barre d'onglets */ --t-xs: 12px; /* badges, horodatages */ --t-s: 13px; /* micro-libellés, notes */ --t-m: 14px; /* texte secondaire, tableaux */ --t-base: 16px; /* corps, et TOUS les champs : en dessous, iOS zoome au focus */ --t-l: 18px; /* titre de carte */ --t-xl: 20px; /* titre de page */ --t-2xl: 26px; /* chiffre de carte */ /* Les deux tailles fluides reprennent exactement les valeurs déjà en place : cette phase réorganise, elle ne redessine pas. */ --t-3xl: clamp(20px, 6.2vw, 28px); /* chiffre d'une section */ --t-4xl: clamp(28px, 10vw, 40px); /* chiffre du héros */ --w-normal: 400; --w-medium: 500; --w-semi: 600; --w-strong: 650; --lh-serre: 1.1; --lh-court: 1.3; --lh-normal: 1.5; --ap-serree: -0.02em; --ap-snug: -0.01em; --ap-capitales: 0.04em; /* ----------------------------------------------------------------- espaces */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --r-s: 8px; --r-m: 12px; --r-l: 20px; --r-pilule: 999px; /* Hauteur de cible tactile : 44 px, plancher des recommandations Apple. */ --cible: 44px; /* ------------------------------------------------------------------ reliefs En sombre, la profondeur vient de la bordure plutôt que de l'ombre : une ombre noire sur fond noir ne se voit pas. */ /* light-dark() ne prend que des COULEURS : on fait donc varier la couleur de l'ombre, pas sa géométrie. En sombre l'ombre devient transparente, ce qui revient exactement à l'ancien « none », et la bordure prend le relais. */ --ombre-proche: light-dark(rgb(20 33 58 / 0.07), transparent); --ombre-diffuse: light-dark(rgb(20 33 58 / 0.04), transparent); --ombre-pop: light-dark(rgb(20 33 58 / 0.16), rgb(0 0 0 / 0.5)); --shadow-card: 0 1px 2px var(--ombre-proche), 0 1px 1px var(--ombre-diffuse); --shadow-pop: 0 8px 30px var(--ombre-pop); --card-border: light-dark(#E4DCCE, #26355A); --focus: var(--accent); /* ------------------------------------------------------------------ gabarit */ --nav-h: 60px; --page-max: 720px; --rail-w: 220px; } /* Choix explicite de l'utilisateur : il l'emporte sur la préférence système. Deux lignes remplacent les soixante que coûtait la recopie manuelle. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; }