/* ============================================================ * Design tokens — palette Letterbook validée * Source de vérité : manifeste de marque + CLAUDE.md * ============================================================ * * Règle d'or palette : chaque couleur vive a UN rôle distinct. * - violet = action (CTA, liens, signature) * - orange = qualité / coup de cœur (étoiles, eyebrows) * - cyan = nouveauté / positif (badges, états) * - violet-pale UNIQUEMENT pour surfaces tintées, JAMAIS en texte. */ :root { /* === Couleurs vives === */ --violet: #8649F1; --violet-pale: #B68FF7; --violet-soft: #EFE5FF; --orange: #FF7849; --orange-soft: #FFE9DF; --cyan: #06B6D4; --cyan-soft: #CFF6FB; /* === Neutres === */ --ink: #0F0F12; --muted: #5B5B62; --subtle: #9B9B95; --bg: #FAFAF8; --bg-elevated: #FFFFFF; --bg-paper: #F2F1EC; --border: #E5E5E2; --border-strong: #C9C7BF; /* === Sémantique === */ --danger: #B91C1C; --danger-soft: #FEE2E2; --success: #15803D; --success-soft: #DCFCE7; /* === Géométrie === */ --radius: 8px; --radius-sm: 5px; --radius-lg: 12px; --radius-btn: 11px; --radius-pill: 999px; /* === Ombres === échelle unique (fini les box-shadow inline). */ --shadow-sm: 0 1px 2px rgba(15, 15, 18, 0.04); --shadow-md: 0 1px 2px rgba(15, 15, 18, 0.04), 0 10px 20px -16px rgba(15, 15, 18, 0.16); --shadow-lg: 0 2px 6px rgba(15, 15, 18, 0.06), 0 20px 40px -24px rgba(15, 15, 18, 0.24); /* Ombre "objet posé" pour les couvertures (le contenu est le héros). */ --shadow-cover: 0 2px 4px rgba(15, 15, 18, 0.05), 0 14px 28px -16px rgba(15, 15, 18, 0.26); /* Fine hairline interne qui détache une cover de son fond (cover claire sur off-white). Une seule source, dark inclus → pas de règle par fichier. */ --cover-ring: rgba(15, 15, 18, 0.07); /* === Espacement (échelle 4/8 px) === */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; /* === Layout === */ --header-h: 56px; --bottom-nav-h: 64px; /* === Safe areas mobile (notch iPhone) === */ --safe-top: env(safe-area-inset-top, 0); --safe-bottom: env(safe-area-inset-bottom, 0); --safe-left: env(safe-area-inset-left, 0); --safe-right: env(safe-area-inset-right, 0); /* === Typographie === */ --font-sans: 'General Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* Letterbook utilise UNIQUEMENT General Sans (cf. décision design tranchée). Alias maintenu pour les références existantes mais résout en General Sans. */ --font-mono: var(--font-sans); } /* ============================================================ * Dark mode piloté en JS via [data-theme="dark"] sur . * Le script inline en haut du set le mode AVANT le rendu, * et déclare color-scheme: only light/dark explicitement. * Pas de @media (prefers-color-scheme: dark) ici — le JS s'en * charge, ce qui empêche les browsers d'appliquer leur Force * Dark Mode bleu. * ============================================================ */ [data-theme="dark"] { --violet: #A57AF8; --violet-pale: #6B3FC2; --violet-soft: #2A1A4A; --orange: #FF8C66; --orange-soft: #3A1F12; --cyan: #3DD3E6; --cyan-soft: #133038; --ink: #F2F1EC; --muted: #9B9B95; --subtle: #5B5B62; --bg: #0F0F12; --bg-elevated: #18181C; --bg-paper: #1C1C20; --border: #2A2A28; --border-strong: #45433E; --danger: #F87171; --danger-soft: #2A1414; --success: #4ADE80; --success-soft: #0F2419; /* Ombres plus profondes en sombre (le fond absorbe la lumiere). */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px -16px rgba(0, 0, 0, 0.55); --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.5), 0 24px 48px -24px rgba(0, 0, 0, 0.7); --shadow-cover: 0 2px 6px rgba(0, 0, 0, 0.5), 0 16px 34px -16px rgba(0, 0, 0, 0.72); --cover-ring: rgba(255, 255, 255, 0.08); }