/* ============================================================= Les Cerises — Design System (tokens) ------------------------------------------------------------- Fichier AGNOSTIQUE (variables CSS pures) partagé par les 4 apps. Deux axes : thème (clair / sombre) × communauté (cerises=rose / pixels=bleu). Piloté par (voir theme.js). Source de vérité unique — à terme : packages/ui/tokens.css (monorepo). Modèle : le THÈME pilote la luminosité (clair/sombre) ; la COMMUNAUTÉ pilote l'accent ET une légère teinte des fonds (rose pour cerises, bleu pour pixels). Les fonds dépendent donc des deux axes. ============================================================= */ /* ---- Base : invariants (ni thème ni communauté) ---- */ :root { /* Typographie */ --font-heading: 'Outfit', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Mise en page — deux largeurs, deux usages distincts : - --content-max : la ZONE DE TRAVAIL d'une app (conteneur centré). Standard commun à toutes les apps (annuaire, precis, barre inter-apps…). - --prose-max : une COLONNE DE LECTURE (article, fiche, bio…). Au-delà, les lignes deviennent trop longues pour être lisibles ; on plafonne donc le texte même si la zone de travail est large. */ --content-max: 1600px; --prose-max: 820px; /* Gouttière horizontale des conteneurs (aligne barre inter-apps et contenu). */ --content-pad: 24px; /* Rayons */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; /* Transitions */ --transition-fast: 0.2s ease; --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Effets */ --glass-blur: blur(20px); /* Dérivés de l'accent (suivent la communauté active) */ --accent-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%); --text-link: var(--accent); --text-link-hover: var(--accent-hover); /* Texte posé sur un aplat d'accent (boutons pleins) */ --text-inverse: #ffffff; /* Accents secondaires fixes (dégradés de cartes de stats) */ --accent-blue: #3b82f6; --accent-orange: #f97316; --accent-green: #22c55e; } /* ============================================================= AXE THÈME (seul) — bordures, texte, ombres, scrollbar Ces tokens ne dépendent PAS de la communauté. Défaut = sombre (:root nu) ; clair sous [data-theme="light"]. ============================================================= */ :root { --border-color: #2e2e36; --text-main: #f5f5f7; --text-muted: #9b9ba6; --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1); --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.2); --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.3); --scrollbar-thumb: #3e3e4a; --scrollbar-track: #151518; } :root[data-theme="light"] { --border-color: #e2e2e9; --text-main: #1f1f23; --text-muted: #72727e; --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.08); --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.12); --scrollbar-thumb: #cbd5e1; --scrollbar-track: #f1f5f9; } /* ============================================================= AXE COMMUNAUTÉ × THÈME — accent + teinte des fonds (4 combos) cerises = rose (défaut), pixels = bleu. Chaque combinaison définit : l'accent (et ses dérivés) ET les fonds légèrement teintés vers la couleur de la communauté. ============================================================= */ /* Cerises — sombre (défaut) */ :root { --accent: #f43f5e; --accent-hover: #fb7185; --accent-glow: rgba(244, 63, 94, 0.15); --shadow-primary: rgba(244, 63, 94, 0.3); --shadow-focus: rgba(244, 63, 94, 0.15); --border-color-focus: rgba(244, 63, 94, 0.4); --bg-primary: #151013; /* neutre #121214 nuancé rose */ --bg-secondary: #1d171b; --bg-tertiary: #272025; } /* Cerises — clair */ :root[data-theme="light"] { --accent: #e11d48; --accent-hover: #be123c; --accent-glow: rgba(225, 29, 72, 0.1); --shadow-primary: rgba(225, 29, 72, 0.3); --shadow-focus: rgba(225, 29, 72, 0.15); --border-color-focus: rgba(225, 29, 72, 0.4); --bg-primary: #faf6f8; /* neutre #f6f6f9 nuancé rose */ --bg-secondary: #fffdfe; --bg-tertiary: #f5eff2; } /* Pixels — sombre */ :root[data-community="pixels"] { --accent: #3b82f6; --accent-hover: #60a5fa; --accent-glow: rgba(59, 130, 246, 0.15); --shadow-primary: rgba(59, 130, 246, 0.3); --shadow-focus: rgba(59, 130, 246, 0.15); --border-color-focus: rgba(59, 130, 246, 0.4); --bg-primary: #101218; /* neutre #121214 nuancé bleu */ --bg-secondary: #171a22; --bg-tertiary: #1f232e; } /* Pixels — clair (spécificité la plus haute → l'emporte) */ :root[data-theme="light"][data-community="pixels"] { --accent: #2563eb; --accent-hover: #1d4ed8; --accent-glow: rgba(37, 99, 235, 0.1); --shadow-primary: rgba(37, 99, 235, 0.3); --shadow-focus: rgba(37, 99, 235, 0.15); --border-color-focus: rgba(37, 99, 235, 0.4); --bg-primary: #f4f6fb; /* neutre #f6f6f9 nuancé bleu */ --bg-secondary: #fcfdff; --bg-tertiary: #eef1f7; }