/* ============================================================= tokens-perso.css — thème « Perso » de la suite SG Créations Socle chaud commun (Fraunces + fonds crème/sable + dark mode brun). Extrait de Boussole Collab ∩ Carnet de Voyage. Portable tel quel. MODE D'EMPLOI (10 lignes) 1. Copier ce fichier + le dossier /fonts/ (8 woff2 ci-dessous) à la racine. 2. Le charger AVANT le CSS de l'app : 3. Ne surcharger qu'UNE chose par app : --accent (bloc [data-app] plus bas ou un simple :root { --accent:#xxxxxx } après ce fichier). Les déclinaisons --accent-deep/-soft/-line + --focus-ring se recalculent seules si tu les redéfinis, sinon garde les valeurs par défaut (orange sunset). 4. Titres -> font-family:var(--font-display); labels -> var(--font-mono). 5. Radius : var(--radius-sm|--radius|--radius-lg|--radius-pill). 6. Ombres : var(--shadow-sm|--shadow-card|--shadow-pop). 7. Classes prêtes : .u-card .u-pill .u-btn .u-btn-primary .u-eyebrow .u-title .u-mono. 8. Dark mode chaud automatique (prefers-color-scheme: dark). 9. Aucune couleur en dur dans les composants : tout passe par ces variables. 10. woff2 à copier (/fonts/) : fraunces-600, fraunces-italic-400, dm-sans-400, dm-sans-500, dm-sans-600, dm-sans-700, dm-mono-400, dm-mono-500. ============================================================= */ /* ---- Polices auto-hébergées (RGPD, hors-ligne PWA) ---- */ @font-face { font-family:'DM Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/dm-sans-400.woff2') format('woff2'); } @font-face { font-family:'DM Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/dm-sans-500.woff2') format('woff2'); } @font-face { font-family:'DM Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/dm-sans-600.woff2') format('woff2'); } @font-face { font-family:'DM Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/dm-sans-700.woff2') format('woff2'); } /* Fraunces : un seul fichier 600 couvre 500 et 600 (variation portée par le glyphe). */ @font-face { font-family:'Fraunces'; font-style:normal; font-weight:500 600; font-display:swap; src:url('fonts/fraunces-600.woff2') format('woff2'); } @font-face { font-family:'Fraunces'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/fraunces-italic-400.woff2') format('woff2'); } @font-face { font-family:'DM Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/dm-mono-400.woff2') format('woff2'); } @font-face { font-family:'DM Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/dm-mono-500.woff2') format('woff2'); } :root { /* ---- Neutres chauds (socle commun) ---- */ --ink: #2a2620; /* texte, brun très foncé */ --muted: #7a736a; /* texte secondaire */ --paper: #fffcf8; /* fond des cartes / app-shell */ --line: #eee7de; /* bordures, séparateurs */ --page-bg: #f4efe7; /* fond de page hors app-shell */ /* ---- Fonds pastels pleins (chauds) ---- */ --sand: #f6e7d3; /* pastel chaud (badges, encarts doux) */ --cream: #fff3df; /* crème clair (survols, puces) */ --terra: #f3d5c4; /* terracotta pastel */ /* ---- Accent (LA variable à surcharger par app) ---- */ --accent: #f28c28; /* défaut : sunset orange mandarine */ --on-accent: #3a2a17; /* texte lisible SUR l'accent (brun foncé, ~7:1) */ --accent-deep: #c9764f; /* variante lisible sur fond clair (texte) */ --accent-soft: rgba(242,140,40,.10); /* fond très léger de l'accent */ --accent-line: rgba(242,140,40,.28); /* bordure teintée accent */ --focus-ring: rgba(242,140,40,.16); /* halo de focus */ /* Suggestions d'accent par app perso (chaque app garde SA couleur, seul le socle change). Surcharger --accent (+ éventuellement les déclinaisons rgba correspondantes) : Mes Recettes -> #e5573d (tomate / paprika) Agenda Famille -> #f28c28 (sunset, = défaut) [repo agenda-deploy] Bibliothèque Maison -> #8b6db0 (prune / lilas) SG Cockpit -> #f6a74f (ambre) */ /* ---- États ---- */ --danger: #b5483f; --danger-bg: rgba(181,72,63,.08); --success: #2f7a4f; --success-bg:#dff4e9; /* ---- Rayons (généreux) ---- */ --radius-sm: 12px; --radius: 16px; --radius-lg: 22px; --radius-pill: 999px; /* ---- Ombres douces, teintées brun chaud (jamais gris froid) ---- */ --shadow-sm: 0 2px 8px rgba(69,52,43,.08); --shadow-card: 0 18px 55px rgba(69,52,43,.12); --shadow-pop: 0 8px 24px rgba(43,38,32,.22); /* ---- Typographie ---- */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, monospace; color-scheme: light; } /* Dark mode : géré par le pont sous [data-theme="dark"] (tokens.css), seule source du sombre pour cette app (bascule manuelle via theme.js). */ /* ============================================================= Classes utilitaires génériques (aucune dépendance au HTML d'une app) ============================================================= */ .u-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.03em; color: var(--ink); margin: 0; } .u-eyebrow { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; color: var(--accent-deep); margin: 0 0 10px; } .u-mono { font-family: var(--font-mono); letter-spacing: .04em; } .u-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); } .u-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; padding: 5px 11px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-deep); } .u-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 14px; font-weight: 600; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: var(--radius-pill); padding: 12px 18px; cursor: pointer; transition: border-color .2s ease, background .2s ease; } .u-btn:hover { border-color: var(--accent-line); } .u-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus-ring); } .u-btn-primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); } .u-btn-primary:hover { filter: brightness(.96); border-color: var(--accent); }