/* ============================================================================ Beaver AI Revenue OS — jetons de design DESIGN-01 · extrait de la référence Claude Design, pas recopié d'elle. CE FICHIER NE CHANGE RIEN AUJOURD'HUI. --------------------------------------- Il n'introduit que des variables neuves (`--bg-*`, `--text-*`, `--accent`…). Les variables historiques `--c-*` de main.css ne sont pas touchées, et aucune règle existante ne consomme ce qui suit. Le charger est donc un déploiement sans effet visuel — c'est délibéré : DESIGN-01 pose le vocabulaire, DESIGN-02 commence à l'employer. POURQUOI DES JETONS PLUTÔT QUE LES STYLES DU PROTOTYPE ------------------------------------------------------ La référence `.dc.html` est un artefact de design : tout y est en `style=""`, parce que c'est ainsi qu'un prototype se lit vite. Recopier ces attributs produirait une application impossible à faire évoluer — changer une nuance demanderait de retrouver quarante occurrences. Les valeurs ci-dessous sont celles de la référence ; leur organisation ne l'est pas. LE RENVERSEMENT À CONNAÎTRE --------------------------- L'application actuelle est SOMBRE (`--c-bg: #0f1117`). La cible est un canvas clair et chaud (`#f5f3ef`) avec une barre latérale quasi noire. Ce n'est pas un ajustement de nuances, c'est une inversion. D'où la migration par écrans pilotes plutôt qu'un remplacement de `main.css` en un commit. ============================================================================ */ :root { /* ── Fonds ────────────────────────────────────────────────────────────── Le canvas n'est pas gris : il est chaud. C'est ce qui distingue cette interface d'un template d'administration, avant même la typographie. */ --bg-canvas: #f5f3ef; /* fond principal de l'application */ --bg-surface: #fffefc; /* cartes, panneaux — presque blanc, jamais #fff */ --bg-surface-muted: #f1efe9; /* zones secondaires, en-têtes de tableau */ --bg-surface-sunken: #edeae3; /* creux : champs, pistes de barres */ --bg-sidebar: #0c0c0d; /* quasi noir, pas #000 */ --bg-sidebar-hover: #18181b; --bg-sidebar-active: #131316; --bg-inverse: #16161a; /* boutons primaires, badges sombres */ /* ── Texte ────────────────────────────────────────────────────────────── Quatre niveaux suffisent. Un cinquième produit des hiérarchies que personne ne distingue à l'écran. */ --text-primary: #16161a; --text-secondary: #4a473f; --text-muted: #6f6b63; --text-faint: #8a867e; /* métadonnées techniques, horodatages */ --text-inverse: #fbfaf7; /* sur fonds sombres */ --text-inverse-muted: #a39e94; /* barre latérale, second niveau */ /* ── Bordures ─────────────────────────────────────────────────────────── Chaudes elles aussi. Une bordure grise sur un canvas chaud se voit. */ --border-default: #e0ddd5; --border-subtle: #eae7e0; --border-strong: #b9b5ac; --border-inverse: #26241f; /* séparateurs de la barre latérale */ /* ── Couleurs sémantiques ─────────────────────────────────────────────── Employées avec parcimonie. Dans cette interface la donnée porte le sens ; la couleur ne fait que la qualifier. */ --accent: #2e5bff; --accent-hover: #2449d6; --accent-subtle: #eaeefe; --success: #2e7d4f; --success-subtle: #e8f2ec; --warning: #b8791b; --warning-subtle: #f7f0e3; --danger: #c0392e; --danger-subtle: #f8ebe9; /* ── Rayons ───────────────────────────────────────────────────────────── 3 à 9 px, relevés sur la référence. Au-delà, on bascule dans le « SaaS bulle » que le §40 écarte explicitement. */ --radius-xs: 3px; --radius-sm: 5px; /* le plus fréquent dans la référence */ --radius-md: 7px; --radius-lg: 9px; /* modales, palette de commandes — pas les cartes */ /* ── Espacement ───────────────────────────────────────────────────────── Échelle de 4 px. Densité visée ≈ 7/10 : dense sans être serré. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ── Typographie ──────────────────────────────────────────────────────── Geist est la police de la référence. Inter est déjà chargée par index.html et lui ressemble de près : elle sert de repli, pas de second choix — si Geist ne se charge pas, l'interface reste juste. Le monospace est RÉSERVÉ aux données techniques : scores, identifiants, horodatages, latences, versions, états système. Pas au texte courant. */ --font-ui: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace; --text-2xs: 9px; /* étiquettes techniques, méta */ --text-xs: 10.5px; /* badges, légendes */ --text-sm: 11.5px; /* navigation, cellules denses */ --text-base: 13px; /* corps de tableau */ --text-md: 14px; /* corps */ --text-lg: 16px; /* sous-titres */ --text-title: 34px; /* titre de page */ --text-data: 42px; /* valeur métrique principale */ --leading-tight: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.65; /* Le suivi négatif sur les grandes tailles est ce qui fait « éditorial » plutôt que « tableau de bord ». */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.06em; /* petites capitales, en-têtes de section */ /* ── Mise en page ───────────────────────────────────────────────────────*/ --sidebar-expanded: 258px; --sidebar-collapsed: 68px; --topbar-height: 52px; --content-max: 1560px; /* ── Ombres ───────────────────────────────────────────────────────────── Réservées à ce qui flotte réellement (§41). Un panneau de tableau de bord n'a pas d'ombre : il a une bordure. */ --shadow-popover: 0 4px 16px rgba(22, 22, 26, .10), 0 1px 3px rgba(22, 22, 26, .06); --shadow-modal: 0 16px 48px rgba(22, 22, 26, .18), 0 2px 8px rgba(22, 22, 26, .08); /* ── Mouvement ──────────────────────────────────────────────────────────*/ --transition-fast: 120ms cubic-bezier(.4, 0, .2, 1); --transition-normal: 200ms cubic-bezier(.4, 0, .2, 1); } /* Respecter la préférence système (§43). Une interface qui ignore prefers-reduced-motion est inutilisable pour une partie des utilisateurs. */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 1ms; --transition-normal: 1ms; } } /* ── Utilitaires typographiques ──────────────────────────────────────────── Trois classes, pas trente. Elles existent parce qu'elles seront répétées sur chaque écran ; tout le reste appartient aux composants. */ .u-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-normal); } /* Chiffres alignés en colonne dans les tableaux : sans cela, une colonne de scores « saute » d'une ligne à l'autre et se lit mal. */ .u-tnum { font-variant-numeric: tabular-nums; } .u-label { font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-faint); font-weight: 500; }