/* ═══════════════════════════════════════════════════════════ ÉTRIER — Design tokens Univers « sellerie » : cuir, laiton, parchemin, surpiqûres. Source : maquettes de Joffray (pitch.html, suivi-pension.html) Ce fichier vivait dans design/ jusqu'à la v0.18. Il a déménagé dans app/ parce que l'application doit être AUTONOME : la coque iOS n'embarque que ce dossier, et « ../design/tokens.css » pointait hors du bundle. Résultat, dans l'app native, chaque var() retombait à vide — texte sombre sur fond sombre, polices de repli. Rien ne doit sortir de app/. La charte rédigée, elle, reste dans design/charte-graphique.md. ═══════════════════════════════════════════════════════════ */ :root { /* ── Matières ── */ --leather: #432a19; /* cuir foncé — fonds, barres */ --leather-lt: #4c2f1c; /* cuir clair — dégradés d'en-tête */ --leather-dk: #3a2413; --tan: #8a5833; /* cuir fauve — titres secondaires */ --brass: #b78d40; /* laiton — accents, actifs */ --brass-lt: #d8b76a; /* laiton clair — texte sur cuir */ --brass-deep: #9a6f28; /* laiton profond — liens, strong */ --parch: #f6f1e6; /* parchemin — fond principal (éclairci : #efe4ca tirait vers le beige sombre) */ --parch-lt: #fffdf8; /* cartes — presque blanc crème, elles ressortent du fond */ --ink: #2c1e12; /* encre — texte principal */ --muted: #7c6a4f; /* encre passée — texte secondaire */ --stitch: #ddc79a; /* fil de surpiqûre (pointillés) — un cran plus soutenu pour rester visible sur le fond éclairci */ --line: rgba(44, 30, 18, .14); /* filets */ /* ── Disciplines (concours) & types de séance ── */ --cso: #3c6b3e; /* aussi : séance obstacle */ --dressage: #274a7a; /* aussi : séance plat */ --complet: #6d3b52; /* aussi : séance longe */ --endurance: #b5652a; /* aussi : séance extérieur */ --soins: #2f7d64; --repos: #7c6a4f; /* ── Types de pros ── */ --veto: #2f7d64; --marechal: #8a5833; --dentiste: #9a6f28; /* ── Sémantique ── */ --ok: #2c6e36; /* engagements ouverts, pension active */ --ok-bg: #e2eedd; --ok-line: #bcd6b6; --warn: #b5652a; /* clôture imminente */ --closed: #8a4a3b; /* engagements clos */ /* ── Typographies ── */ /* Titres : Fraunces (serif, opsz 9..144) · Corps : Instrument Sans */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'Instrument Sans', system-ui, sans-serif; /* ── Surfaces accentuées (cartes mises en avant) ── Codées en dur, ces valeurs restaient claires en thème sombre et rendaient le texte illisible. Elles sont maintenant des tokens, déclinés par thème. */ --accent-haut: #fdf7e8; --accent-bas: #f7edd6; /* ── Surfaces « cuir » pilotées ── En clair, boutons et barre d'onglets sont en cuir sur fond parchemin : le contraste vient de lui-même. En sombre, le cuir devient plus foncé que la carte qui le porte — un bouton principal y ressemblait à un trou. Ces deux couples se redéclinent donc par thème. */ --btn-bg: var(--leather); --btn-ink: var(--brass-lt); --nav-bg: var(--leather); /* Champs de saisie : ils doivent se creuser sous la carte qui les porte, sans devenir un trou noir (cf. l'assistant ordonnance en sombre). */ --field-bg: #ffffff; /* ── Géométrie ── */ --r-card: 14px; --r-chip: 999px; --r-tag: 6px; --shadow-sheet: 0 -12px 32px rgba(44, 30, 18, .28); } /* ═══════════════════════════════════════════════════════════ Thème sombre — « cuir de nuit ». Suit le réglage du système, ou le choix explicite de l'utilisateur (attribut data-theme sur , posé par Profil → Apparence). ═══════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) { --leather: #3d2e21; --leather-lt: #4a3827; --leather-dk: #302418; --tan: #d0a670; --brass: #c69a49; --brass-lt: #e6ca8f; --brass-deep: #dbb268; --parch: #362a21; /* cuir de nuit — plus du presque-noir */ --parch-lt: #453528; /* cartes nettement détachées du fond */ --ink: #f5ecd9; --muted: #b8a284; /* remonté : 3,6:1 sur les cartes éclaircies, insuffisant */ --stitch: #6b5236; --line: rgba(245, 236, 217, .17); --ok: #7dc985; --ok-bg: #2a3d25; --ok-line: #4a6b45; --closed: #dd9a85; --accent-haut: #52402a; --accent-bas: #423120; /* Le cuir est ici plus foncé que la carte : le bouton principal passe au laiton plein, sinon il se lit comme un trou (bug vu sur l'assistant ordonnance). La barre d'onglets, elle, reste plus sombre que le fond. */ --btn-bg: var(--brass); --btn-ink: #241a12; --nav-bg: #2a2018; --field-bg: #2e241c; } } :root[data-theme="sombre"] { --leather: #3d2e21; --leather-lt: #4a3827; --leather-dk: #302418; --tan: #d0a670; --brass: #c69a49; --brass-lt: #e6ca8f; --brass-deep: #dbb268; --parch: #362a21; /* cuir de nuit — plus du presque-noir */ --parch-lt: #453528; /* cartes nettement détachées du fond */ --ink: #f5ecd9; --muted: #b8a284; /* remonté : 3,6:1 sur les cartes éclaircies, insuffisant */ --stitch: #6b5236; --line: rgba(245, 236, 217, .17); --ok: #7dc985; --ok-bg: #2a3d25; --ok-line: #4a6b45; --closed: #dd9a85; --accent-haut: #52402a; --accent-bas: #423120; /* Le cuir est ici plus foncé que la carte : le bouton principal passe au laiton plein, sinon il se lit comme un trou (bug vu sur l'assistant ordonnance). La barre d'onglets, elle, reste plus sombre que le fond. */ --btn-bg: var(--brass); --btn-ink: #241a12; --nav-bg: #2a2018; --field-bg: #2e241c; }