/* ═══════════════════════════════════════════════════════════════════════════ Arkensai · design-tokens.css · v1.3 · 2026-06-26 ═══════════════════════════════════════════════════════════════════════════ CHANGELOG ───────── v1.3 (2026-06-26) — Élargissement thread + composer à 1100px · --thread-max passe de 880 à 1100px (même valeur que --composer-max). Rationale : avec un panneau RSE à droite (~264px), on a 1600+px disponibles sur grand écran. Limiter le thread à 880px tout en mettant le composer à 1100 créait un décalage visuel inesthétique. Solution validée : thread et composer à la MÊME largeur (1100px) = alignement parfait + meilleur usage de l'espace. · Bonus : la place gagnée permet d'ajouter un 6ème entry-btn "Image" dans le composer (cf. index v9.10). v1.2 (2026-06-26) — Composer aligné sur thread à 880px (annulé en v1.3) v1.1 (2026-06-26) — Composer à 1100px (annulé en v1.2) v1.0 (2026-06-25) — Version initiale RÔLE ──── Définit le LANGAGE de design (les "tokens" abstraits) que toutes les feuilles de thème et de composants viennent consommer. Aucun token ne porte de valeur concrète ici — uniquement la déclaration de "ce qui existe". Les valeurs concrètes sont assignées dans : - theme-arkensai.css (thème standard Arkensai light + dark) - theme-client-.css (thème white-label pour un client) Cette séparation permet de : - Changer toute la charte en remplaçant UN fichier - Vérifier qu'un thème custom n'oublie aucun token - Documenter chaque token (sémantique vs valeur) STRUCTURE ───────── 1. COULEURS sémantiques (bg, fg, accent, etc.) 2. TYPOGRAPHIE (familles, tailles, line-heights) 3. ESPACEMENT (échelle 4px) 4. BORDURES & RAYONS 5. OMBRES 6. MOTION (transitions, easings) 7. LAYOUT (hauteurs fixes, largeurs containers) 8. Z-INDEX (échelle stricte) 9. BRAND (logo, nom, sous-titre — paramétrables par tenant) CHANGELOG ───────── v1.0 (2026-06-25) — Création initiale ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ─── 1. COULEURS SÉMANTIQUES ───────────────────────────────────────────── Aucune valeur ici, juste la déclaration de l'existence des tokens. Les valeurs concrètes sont définies dans theme-arkensai.css. ──────────────────────────────────────────────────────────────────────── */ /* Surfaces : du fond principal au plus surélevé */ /* --c-bg : fond principal de l'application */ /* --c-bg-elevated : fond des cartes, sidebar, panneaux */ /* --c-bg-muted : fond discret (chips, badges, code inline) */ /* --c-bg-hover : état hover sur surfaces */ /* Texte */ /* --c-fg : texte principal */ /* --c-fg-muted : texte secondaire (labels, métadonnées) */ /* --c-fg-subtle : texte tertiaire (placeholders, hints) */ /* --c-fg-on-accent: texte sur fond accent (boutons primaires) */ /* Bordures */ /* --c-line : ligne légère (séparateurs entre sections) */ /* --c-line-strong : ligne marquée (bordure des inputs, cartes actives) */ /* Accent (couleur de marque) */ /* --c-accent : couleur primaire d'action (boutons, focus) */ /* --c-accent-fg : texte sur fond accent */ /* --c-accent-soft : variante atténuée de l'accent (focus ring, hover doux) */ /* --c-accent-hover: hover sur fond accent */ /* Sémantique d'état */ /* --c-eco : succès, RSE positif, économies */ /* --c-warn : avertissement, attention */ /* --c-danger : erreur, alerte */ /* --c-info : information, neutre */ /* ─── 2. TYPOGRAPHIE ────────────────────────────────────────────────────── Pour Arkensai : Fraunces (display italique), Inter (UI), JetBrains Mono. ──────────────────────────────────────────────────────────────────────── */ /* --f-display : police "éditoriale" pour titres et accents (Fraunces) */ /* --f-sans : police UI principale (Inter) */ /* --f-mono : police monospace pour code, métadonnées, data (JetBrains Mono) */ /* Tailles de texte (échelle harmonieuse, ratio ~1.2) */ /* --fs-xs : 11px — métadonnées, statuts */ /* --fs-sm : 12px — texte d'aide, labels secondaires */ /* --fs-base : 14px — corps principal UI */ /* --fs-md : 15px — corps confortable (chat) */ /* --fs-lg : 17px — titres de sections */ /* --fs-xl : 20px — titres de panneaux */ /* --fs-2xl : 28px — empty state subtitle */ /* --fs-3xl : 48px — empty state greeting */ /* Line heights */ /* --lh-tight : 1.15 — titres */ /* --lh-normal : 1.5 — corps */ /* --lh-loose : 1.7 — long-form (réponse IA) */ /* ─── 3. ESPACEMENT ─────────────────────────────────────────────────────── Échelle 4px : 1=4, 2=8, 3=12, 4=16, 5=20, 6=24, 8=32, 10=40, 12=48 ──────────────────────────────────────────────────────────────────────── */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ─── 4. BORDURES & RAYONS ────────────────────────────────────────────── */ --radius-sm: 3px; --radius: 6px; /* défaut */ --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; --border-w: 1px; /* ─── 5. OMBRES ───────────────────────────────────────────────────────── Définies dans theme-* (varient entre clair et sombre). ────────────────────────────────────────────────────────────────────── */ /* --shadow-sm : ombre fine (boutons surélevés) */ /* --shadow-md : ombre standard (cartes) */ /* --shadow-lg : ombre dense (modals, panneaux) */ /* ─── 6. MOTION ──────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --d-fast: 150ms; --d-base: 240ms; --d-slow: 400ms; /* ─── 7. LAYOUT ──────────────────────────────────────────────────────── */ --header-h: 56px; --composer-h: 140px; --sidebar-w: 320px; --tools-w: 460px; --thread-max: 1100px; /* Élargi en v1.3 pour s'aligner sur le composer. Les paragraphes peuvent être un peu plus larges mais l'alignement visuel composer/thread prime. */ --composer-max: 1100px; /* Identique au thread pour alignement parfait des bords. */ /* ─── 8. Z-INDEX ─────────────────────────────────────────────────────── */ --z-base: 0; --z-elevated: 10; --z-header: 50; --z-dropdown: 80; --z-overlay: 100; --z-sidebar: 110; --z-tools-panel: 120; --z-modal-overlay: 200; --z-modal: 210; --z-toast: 300; /* ─── 9. BRAND (paramétrable par tenant) ───────────────────────────────── Ces variables sont les SEULES à modifier pour faire un thème client. ──────────────────────────────────────────────────────────────────────── */ /* Nom de la plateforme (affiché à droite du logo dans le header) */ --brand-name: 'Arkensai'; /* Sous-titre (affiché à droite du nom, séparé par un point) */ --brand-subtitle: 'Multimodal Agent'; /* URL du logo image (laisser vide pour utiliser le fallback SVG inline) */ --brand-logo-url: none; /* Hauteur du logo dans le header */ --brand-logo-h: 28px; }