/* ============================================================ Coopérative Oasis — DESIGN SYSTEM CONSOLIDÉ tokens.css · un SEUL :root · noms de tokens existants (swap, pas remap) ------------------------------------------------------------ • Aucune redéfinition de token par écran. • Theming par univers via [data-univers="parts|livret|coop"] : les composants consomment --accent…, jamais --ps… ni --lv… en dur. • Ajouts (absents de l'ancien CSS, indispensables pour stopper l'improvisation des tailles écran par écran) : - échelle typo --fs-* - échelle d'espacement --sp-* (grille 4px) - --accent-tint-2 (les composants l'utilisent déjà via --ps-tint-2) → tout ajout est signalé « AJOUT » et documenté dans conflits-resolus.md ============================================================ */ /* ---------- Police de marque ---------- Politique EXPLICITE (pas de fallback implicite qui décale les textes) : Geomanist est déjà chargée et licenciée côté projet → police primaire. Work Sans = repli licencié si Geomanist indisponible sur un environnement. Si l'on bascule sur Work Sans, l'échelle --fs-* reste valable (metrics proches). */ @font-face{font-family:"Geomanist";src:url("../fonts/Geomanist-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:"Geomanist";src:url("../fonts/Geomanist-Regular-Italic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap;} @font-face{font-family:"Geomanist";src:url("../fonts/Geomanist-Book.otf") format("opentype");font-weight:450;font-style:normal;font-display:swap;} @font-face{font-family:"Geomanist";src:url("../fonts/Geomanist-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:"Geomanist";src:url("../fonts/Geomanist-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap;} @font-face{font-family:"Geomanist";src:url("../fonts/Geomanist-Black.otf") format("opentype");font-weight:800;font-style:normal;font-display:swap;} :root{ /* ===== Famille typo ===== */ --font: "Geomanist","Work Sans",system-ui,-apple-system,Segoe UI,sans-serif; --mono: ui-monospace,Menlo,"SF Mono",monospace; /* ===== Texte ===== */ --ink: #2b2d33; --ink-2: #565b63; --muted: #868c95; --faint: #aab0b8; --ink-inverse:#fff; /* ===== Lignes / surfaces ===== */ --line: #e8eaed; --line-2: #d9dce0; --bg: #f3f4f3; --card: #ffffff; --card-2: #fafbfa; /* ===== Univers PARTS SOCIALES — turquoise (#00becd) ===== */ --ps: #0a8a9b; /* fonds boutons (texte blanc), accents */ --ps-strong: #056370; /* titres, montants, hover, texte sur blanc */ --ps-bright: #00becd; /* liserés, bordures KPI, gros pictos */ --ps-tint: #e2f7f9; /* fond clair */ --ps-tint-2: #c2eef2; /* bordure de tint */ /* ===== Univers LIVRET OASIS — ambre/or (#ffd500) ===== */ --lv: #eaa800; /* doré : coche/étape, bordures, accents */ --lv-strong: #8f6a00; /* titres, montants, texte sur blanc (AA) */ --lv-bright: #ffd500; /* liserés, bordures KPI, fond bouton (txt foncé) */ --lv-tint: #fff5d3; --lv-tint-2: #fbe7a6; /* ===== Coopérative — vert d'action / niveau « compte » ===== */ --coop: #2baf7a; --coop-strong: #1f9168; --coop-tint: #eaf7f0; /* ===== Sémantiques ===== */ --ok: #2baf7a; --info: #00becd; --warn: #e8920a; --warn-tint: #fdf3e0; --danger: #e2483d; --danger-tint: #fdeceb; /* ===== Palette mosaïque (graphiques / illustrations) ===== */ --m-teal: #00becd; --m-green: #2baf7a; --m-lime: #96dc3c; --m-yellow: #ffd500; --m-orange: #ff8c00; --m-coral: #ff5a64; --m-purple: #a362bc; /* ===== Rayons ===== */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; /* ===== Ombres ===== */ --sh-1: 0 1px 2px rgba(43,45,51,.05), 0 1px 3px rgba(43,45,51,.04); --sh-2: 0 2px 6px rgba(43,45,51,.06), 0 6px 18px rgba(43,45,51,.06); --sh-3: 0 10px 34px rgba(43,45,51,.12); /* ===== Motion / layout ===== */ --ease: cubic-bezier(.2,.7,.3,1); --sidebar-w: 256px; --page-max: 1080px; /* ===== AJOUT — Échelle typographique (px) ===== Collapse des ~24 tailles improvisées vers 11 paliers canoniques. Détail des arrondis dans conflits-resolus.md. */ --fs-micro: 11px; /* eyebrow, tag, th de table, micro-label */ --fs-xs: 12px; /* hint, meta, légende, label de fait */ --fs-sm: 13px; /* texte secondaire, puce, nav, td */ --fs-md: 14px; /* corps réduit, label, bouton (base) */ --fs-base: 15px; /* champ, valeur de champ, contrôle */ --fs-lg: 16px; /* corps de lecture, gros bouton */ --fs-lead: 17px; /* chapô, valeur mise en avant */ --fs-title: 19px; /* titre de carte / section */ --fs-title-lg: 22px; /* titre de modale, saisie de montant */ --fs-kpi: 26px; /* valeur KPI, titre de page */ --fs-display: 34px; /* solde héro, titre héro */ /* line-heights */ --lh-tight: 1.18; --lh-snug: 1.4; --lh-body: 1.55; /* ===== AJOUT — Échelle d'espacement (grille 4px) ===== */ --sp-2xs: 2px; --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px; --sp-xl: 20px; --sp-2xl: 24px; --sp-3xl: 32px; --sp-4xl: 40px; /* ===== Theming par univers — valeurs PAR DÉFAUT = coopérative (vert) ===== Niveau « compte » (login, profil, coquille) = neutre coop. Les écrans/cartes produit posent [data-univers="parts|livret"]. */ --accent: var(--coop); --accent-strong: var(--coop-strong); --accent-bright: var(--coop); --accent-tint: var(--coop-tint); --accent-tint-2: color-mix(in srgb, var(--coop) 22%, #fff); /* AJOUT */ --accent-on: #ffffff; /* couleur de texte SUR un fond --accent */ } /* ---------- Réassignation par univers ---------- */ [data-univers="parts"]{ --accent: var(--ps); --accent-strong: var(--ps-strong); --accent-bright: var(--ps-bright); --accent-tint: var(--ps-tint); --accent-tint-2: var(--ps-tint-2); --accent-on: #ffffff; } [data-univers="livret"]{ --accent: var(--lv); --accent-strong: var(--lv-strong); --accent-bright: var(--lv-bright); --accent-tint: var(--lv-tint); --accent-tint-2: var(--lv-tint-2); --accent-on: var(--ink); /* l'or réclame un texte foncé (AA) */ } [data-univers="coop"]{ --accent: var(--coop); --accent-strong: var(--coop-strong); --accent-bright: var(--coop); --accent-tint: var(--coop-tint); --accent-tint-2: color-mix(in srgb, var(--coop) 22%, #fff); --accent-on: #ffffff; }