/* ============================================================================ tokens.css — source unique de vérité du système de design. Aucune valeur hexadécimale ne doit être écrite ailleurs que dans ce fichier. Direction : « instrument monochrome ». Le produit est achromatique ; la couleur est RÉSERVÉE au statut d'un scan. Un vert dans l'écran veut donc toujours dire « colis validé », jamais « bouton joli ». C'est ce qui rend le signal lisible d'un coup d'œil. ========================================================================= */ :root{ color-scheme: dark; /* --- Surfaces --------------------------------------------------------- Noir neutre très légèrement chaud. Surtout pas de bleu : c'est le bleu marine qui fait « tableau de bord générique ». */ --s-0:#08080a; /* fond de page */ --s-1:#0e0e11; /* carte, panneau */ --s-2:#16161a; /* élément surélevé : champ, bouton secondaire */ --s-3:#1f1f25; /* survol */ --s-4:#2a2a31; /* actif / enfoncé */ --well:#050506; /* puits de l'afficheur — la surface la plus noire */ /* --- Filets ----------------------------------------------------------- Traits pleins et nets. Un rgba() translucide bave sur les fonds sombres et donne ce flou caractéristique des interfaces bâclées. */ --line:#26262c; --line-strong:#34343c; --line-soft:#1b1b20; /* --- Texte ------------------------------------------------------------ Blanc cassé chaud. Le blanc pur (#fff) sur du noir vibre et fatigue. */ --fg:#f4f3f0; --fg-2:#a9a8a4; /* secondaire */ /* Valeurs calées sur WCAG AA contre --s-0 : --fg-3 atteint 4,7:1 (texte normal), --fg-4 reste à 3,1:1 et n'est donc réservé qu'aux états inactifs et aux repères décoratifs — jamais à du texte à lire. */ --fg-3:#7c7b78; /* étiquettes d'instrument, texte tertiaire */ --fg-4:#605f5c; /* désactivé, texte d'invite */ --on-accent:#08080a; /* texte posé sur un aplat clair */ /* --- Signal — les seules couleurs saturées du produit ------------------ */ --ok:#35d07f; --ok-soft:rgba(53,208,127,.12); --ok-line:rgba(53,208,127,.38); --ok-glow:rgba(53,208,127,.55); --wrong:#ffb020; --wrong-soft:rgba(255,176,32,.12); --wrong-line:rgba(255,176,32,.40); --wrong-glow:rgba(255,176,32,.55); --err:#ff5a52; --err-soft:rgba(255,90,82,.12); --err-line:rgba(255,90,82,.38); --err-glow:rgba(255,90,82,.55); /* --- Verre — couches posées PAR-DESSUS la vidéo de la caméra ------------ Elles ne peuvent pas dériver des surfaces opaques : elles doivent rester lisibles quoi que filme l'objectif, donc elles sont semi-transparentes et s'appuient sur un backdrop-filter. */ --black:#000; --white:#fff; --glass:rgba(20,20,24,.62); --glass-hover:rgba(38,38,44,.78); --glass-panel:rgba(12,12,15,.62); --glass-line:rgba(255,255,255,.14); --glass-line-soft:rgba(255,255,255,.13); --glass-line-strong:rgba(255,255,255,.34); --on-video:rgba(255,255,255,.62); --on-video-strong:rgba(255,255,255,.78); --scrim:rgba(0,0,0,.62); --scrim-top:linear-gradient(to bottom,rgba(0,0,0,.78),rgba(0,0,0,0)); --scrim-bottom:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,0)); /* --- Typographie ------------------------------------------------------ Piles système uniquement : l'appli doit rester utilisable dans un entrepôt sans réseau. Le caractère vient du poids et du tracking. */ --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI", Roboto,"Helvetica Neue",Arial,sans-serif; --font-num:"SF Pro Display",-apple-system,BlinkMacSystemFont, "Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas, "Liberation Mono",monospace; --t-label:.6875rem; /* 11px — étiquettes majuscules espacées */ --t-xs:.75rem; --t-sm:.8125rem; --t-base:.875rem; --t-md:.9375rem; --t-lg:1.0625rem; --t-xl:1.25rem; --t-input:clamp(1.0625rem,.95rem + .8vw,1.3125rem); --ls-label:.16em; /* tracking des étiquettes d'instrument */ --ls-tight:-.02em; --ls-num:-.05em; /* --- Espace — base 4 px ----------------------------------------------- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px; /* --- Rayons ----------------------------------------------------------- Volontairement variés. Le même rayon partout (12–18 px) est le tic visuel numéro un des interfaces générées ; ici chaque échelle d'élément a le sien. */ --r-sm:6px; /* pastilles, petits marqueurs */ --r-md:10px; /* boutons, champs */ --r-lg:14px; /* panneaux internes */ --r-xl:20px; /* carte principale, feuilles */ --r-pill:999px; /* uniquement pour ce qui est vraiment une pilule */ /* --- Élévation -------------------------------------------------------- Quasi nulle. Un filet net + un liseré interne haut suffisent à poser un plan ; les grosses ombres portées molles écrasent une interface sombre. */ --lift-1:inset 0 1px 0 rgba(255,255,255,.04); --lift-2:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.6); --lift-3:inset 0 1px 0 rgba(255,255,255,.06), 0 8px 24px -8px rgba(0,0,0,.85); --inset-well:inset 0 1px 3px rgba(0,0,0,.8); --lift-float:0 20px 50px -20px rgba(0,0,0,.9); /* panneau flottant sur vidéo */ /* --- Mouvement -------------------------------------------------------- */ --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.4,0,.2,1); --d-1:120ms; --d-2:180ms; --d-3:260ms; --d-4:420ms; /* --- Divers ------------------------------------------------------------ */ --focus:0 0 0 2px var(--s-0), 0 0 0 4px var(--fg-2); --tap:44px; /* cible tactile minimale */ --z-sheet:60; --z-overlay:70; --z-lock:90; --z-toast:100; } /* La trame de points de l'afficheur : un repère technique, pas un décor. Définie ici pour rester alignée sur les tokens de couleur. */ :root{ --grid-dot:rgba(255,255,255,.045); --grid-size:22px; }