/* ============================================================ THE NAUGHTY GOLFER — tokens.css Système de design. Aucune règle de mise en page ici. ============================================================ */ /* UNE SEULE police pour toute l'application. La graisse 500 est importée parce que quatre règles de components.css la demandent (totaux, aller, retour, marques) : sans elle, le navigateur retomberait sur 400 et ces chiffres maigriraient. */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;800&display=swap'); :root { /* ---------- Couleurs ----------------------------------- */ /* Fond craie clair : obligatoire pour la lisibilité en plein soleil. Un thème sombre devient illisible sur un parcours à midi. */ --paper: #F1F3EC; --paper-raised: #FFFFFF; --paper-sunk: #E4E8DC; --ink: #13241B; /* vert-noir du logo, texte principal */ --ink-soft: #5A6B60; /* texte secondaire */ --ink-faint: #9AA79E; /* placeholders, trous non joués */ --rule: #C9D2C2; /* filets de la carte */ --rule-strong: #14261C; /* Convention de notation golf : rouge = sous le par, encre = au-dessus. Reprise des retransmissions et des cartes papier. */ --under-par: #D8342A; --over-par: var(--ink); /* ---------- Actions ------------------------------------- UNE SEULE couleur d'action : le vert du logo. Deux aplats saturés côte à côte se battent — c'était le défaut de la version précédente, où l'ocre de RAMASSÉ rivalisait avec le vert de VALIDER alors qu'il s'agit d'une sortie de secours. Hiérarchie retenue : VALIDER → aplat vert, action principale RAMASSÉ → contour foncé sur fond clair, action secondaire désactivé → gris neutre, jamais du vert délavé --------------------------------------------------------- */ --action: #606D3C; /* VALIDER — vert olive profond. Il a longtemps été un vert clair (#A6CC46), celui du mot « caddy », avec du texte vert foncé dessus. Ce vert-ci est nettement plus sombre : le texte y passe donc en BLANC, et les deux changements sont indissociables. Les chiffres : sur ce fond, l'ancien texte vert foncé donnait 2.0 de contraste — illisible. Le blanc donne 5.6, au-dessus du seuil de 4.5 exigé pour un texte de cette taille. La teinte, elle, ne bouge pas : 76°, exactement celle du logo. C'est une autre valeur du même vert, pas une autre couleur. */ --action-ink: #FFFFFF; /* texte du bouton principal. Du blanc, et non un vert foncé : sur l'aplat clair d'avant, le blanc était illisible (2.1) et il fallait un vert sombre ; sur l'aplat profond d'à présent, c'est l'inverse exact — le vert sombre tombe à 2.0, le blanc monte à 5.6. Ce jeton et --action changent toujours ENSEMBLE : l'un est le fond, l'autre ce qu'on lit dessus. */ --action-deep: #4F631D; /* même TEINTE que le vert du logo (77°), simplement plus sombre. La valeur précédente était un vert forêt à 125° : 48 degrés d'écart, soit une autre couleur et non une autre nuance. C'est ce qui faisait sonner faux le badge MARQUEUR à côté du reste. Contraste 6.7:1 avec du blanc. */ --action-soft: #EEF5E2; /* fond très dilué */ /* Compteur − et + : famille franchement différente du vert, pour qu'on ne confonde jamais « je compte » et « je valide ». */ --count: #33506B; /* bleu ardoise */ --count-ink: #FFFFFF; --count-soft: #E8EDF2; /* ---------- Chemin alternatif --------------------------- Deuxième niveau d'action, pas deuxième couleur. Revenir, saisir autrement, changer de méthode : ce sont des actions, donc elles restent vertes. Ce qui les distingue du bouton principal est l'intensité de l'aplat, pas la teinte. L'ardoise a été essayée ici puis retirée : elle appartient au comptage — les boutons − et + — et l'employer ailleurs brouillait ce qu'elle signifie. --------------------------------------------------------- */ /* ATTENTION : ce jeton ne doit PAS suivre --action-ink. Il l'a fait, et le jour où --action-ink est passé au blanc — pour rester lisible sur le nouvel aplat sombre — tous les boutons secondaires ont hérité de ce blanc sur leur fond vert PÂLE. « Photographier la carte » est devenu invisible : 1.1 de contraste, mesuré. Un aplat sombre et un aplat pâle n'appellent jamais la même encre. Celui-ci porte donc sa propre valeur, explicitement. */ --alt: var(--action-deep); /* texte sur aplat pâle, teinte 77° */ --alt-line: var(--action-deep); /* contour, teinte 77° */ --alt-soft: var(--action-soft); /* aplat dilué */ /* RAMASSÉ : aplat ambre pastel, texte foncé. Même logique que VALIDER — un aplat clair avec du texte foncé reste lisible en plein soleil, là où un aplat saturé avec du blanc échoue. */ --pickup: #F0DDB8; --pickup-ink: #6E460C; --pickup-line: #8B6723; /* bordure et éléments fins. Assombri : l'ancienne valeur ne donnait que 1.9 de contraste sur l'aplat ambre, donc un contour invisible. */ --pickup-bg: #FBF5EA; /* fond de bloc, plus dilué encore */ --disabled: #DDE2D8; /* gris neutre */ --disabled-ink: #6E7A6B; /* assez foncé pour rester lisible */ /* Destructif. Même TEINTE que le rouge des birdies — les deux rouges de l'app sont le même rouge — mais saturation ramenée à 55%, comme le vert du logo. La valeur précédente montait à 74% : c'était la couleur la plus saturée de l'application, et elle sonnait faux à côté d'une palette qui vit entre 35 et 65%. */ --danger: #92312A; --danger-soft: #F6EAE9; /* aplat dilué, même traitement que --alt */ /* Accent de marque, utilisé avec parcimonie : trou en cours, logo. */ --brand: #97C02E; /* vert clair du logo, accents et surlignages */ --brand-ink: #13241B; --focus: var(--action-deep); /* ---------- Marques du panneau d'aide ------------------- Huit pastilles, huit teintes. C'est une exception assumée à la règle d'une seule couleur d'action, et elle tient à un point précis : ces pastilles ne sont pas des actions. On ne les touche pas, elles n'ouvrent rien, elles ne valident rien. Ce sont des repères d'index — la couleur sert à retrouver « la rouge » ou « la violette » dans une liste de huit lignes, comme les intercalaires d'un classeur. Elles portent leur propre préfixe pour cette raison. Aucun bouton, aucun état, aucune bordure de l'application ne doit utiliser un jeton --aide-* : le jour où l'un d'eux apparaît ailleurs, l'exception aura fui hors de son cadre. Elles servent de FOND, avec le tracé en blanc dessus. Les quatre plus claires — corail, ambre, violet, vert clair — donnent entre 3 et 4 de contraste avec le blanc. C'est en dessous du seuil d'un texte, et au-dessus de celui d'un pictogramme décoratif de cette taille, qui ne porte aucune information : chaque ligne dit en toutes lettres ce que son dessin illustre. --------------------------------------------------------- */ --aide-compter: #4F631D; /* vert profond, teinte du logo */ --aide-penalite: #CE6C64; /* corail, teinte du rouge de l'app */ --aide-perdue: #5C7B93; /* ardoise, famille du compteur */ --aide-ramasse: #B08A6E; /* terre, famille de RAMASSÉ */ --aide-par: #6BA13C; /* vert clair, entre logo et brand */ --aide-marqueur: #8B72C4; /* violet — la seule teinte étrangère à la palette. Elle est ici parce qu'il fallait huit repères distinguables et que sept teintes de la palette ne le permettaient pas. */ --aide-carte: #DE7845; /* ambre soutenu, famille de --pickup */ --aide-reflexes: #6E8149; /* olive, famille de --action */ /* ---------- Typographie -------------------------------- UNE SEULE famille dans toute l'application. Elle est déclarée ici, à un seul endroit, et les trois tokens historiques n'en sont plus que des alias : aucune règle de components.css ne peut donc introduire une seconde police, même par erreur. L'application en portait deux : Archivo pour le texte, DM Mono pour les chiffres du tableau de score. La monospace existait pour une seule raison — aligner les colonnes de chiffres. Ce rôle est désormais tenu par font-variant-numeric: tabular-nums, posé sur le body dans base.css, qui donne des chiffres de largeur égale SANS changer de police. Résultat visible : le 4 de la pastille « Par 4 » et le 4 du tableau étaient dessinés par deux polices différentes. Ils sont maintenant le même 4. --font-mono garde son nom pour ne pas avoir à toucher les onze règles qui l'utilisent. Il ne désigne plus une chasse fixe mais « les chiffres de données » — à renommer un jour, sans urgence. */ --font: 'Archivo', system-ui, sans-serif; --font-display: var(--font); --font-body: var(--font); --font-mono: var(--font); --w-regular: 400; --w-medium: 500; /* totaux et sous-totaux du tableau de score */ --w-semi: 600; --w-black: 800; --t-xs: 0.75rem; --t-sm: 0.875rem; --t-base: 1rem; --t-lg: 1.25rem; --t-xl: 1.625rem; --t-2xl: 2.25rem; --t-score: 4rem; /* le compteur de coups, lisible à bout de bras */ --track-tight: -0.02em; --track-wide: 0.08em; /* eyebrows et libellés de colonne */ /* ---------- Espacement --------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; /* ---------- Formes ------------------------------------- */ --r-sm: 4px; --r-md: 10px; --r-lg: 18px; --r-pill: 999px; /* Cible tactile minimale : gros gants, doigts mouillés, en marchant. */ --touch-min: 56px; --touch-xl: 76px; --border: 1.5px solid var(--rule); --border-strong: 2px solid var(--rule-strong); --shadow-raised: 0 1px 0 rgba(20, 38, 28, 0.12); --shadow-sheet: 0 -8px 32px rgba(20, 38, 28, 0.16); /* ---------- Mouvement ---------------------------------- */ /* Uniquement pour confirmer une action. Jamais pour ralentir. */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --dur-fast: 110ms; --dur-base: 180ms; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; } }