/* design-system.css — GenTabs · Blueprint v3.1 P1 Tous les tokens sont préfixés --ds-. Les couleurs sont des triplets HSL nus (composables avec hsl(var(--ds-x) / .4)). Deux thèmes via [data-theme] sur . Aucune couleur brute dans les composants : uniquement des tokens. */ @font-face { font-family: "Inter"; src: url("../fonts/InterVariable.2bf3d951bf9d.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } :root { /* typographie */ --ds-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ds-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --ds-text-xs: 11px; --ds-text-sm: 12px; --ds-text-md: 13px; /* base opérateur */ --ds-text-lg: 15px; --ds-text-xl: 18px; --ds-leading: 1.5; /* couleur fonctionnelle (identiques dans les deux thèmes) */ --ds-primary: 245 58% 62%; --ds-primary-fg: 0 0% 100%; --ds-success: 152 48% 44%; --ds-warning: 40 70% 52%; --ds-danger: 358 72% 58%; /* forme */ --ds-radius-sm: 4px; --ds-radius: 6px; --ds-radius-lg: 10px; --ds-ring: 0 0 0 2px hsl(var(--ds-surface)), 0 0 0 4px hsl(var(--ds-primary)); /* espace (4 px) */ --ds-1: 4px; --ds-2: 8px; --ds-3: 12px; --ds-4: 16px; --ds-5: 20px; --ds-6: 24px; --ds-8: 32px; /* layout du shell */ --ds-topbar-h: 44px; --ds-tabs-h: 38px; --ds-sidepanel-w: 340px; --ds-drawer-w: 360px; --ds-row-h-compact: 30px; --ds-row-h-comfortable: 38px; /* mouvement */ --ds-ease: cubic-bezier(.2, .7, .2, 1); --ds-t: 160ms; } /* ---- thème sombre (défaut) : cockpit. Contrastes vérifiés (AUDIT §5) : encre 14.7, sourdine 6.9, tertiaire 5.4 sur surface. */ :root, [data-theme="dark"] { color-scheme: dark; --ds-canvas: 228 18% 5%; --ds-surface: 228 14% 9%; --ds-raised: 228 13% 12%; --ds-hover: 228 12% 16%; --ds-line: 228 11% 18%; --ds-line-strong: 228 10% 27%; --ds-ink: 225 10% 91%; --ds-ink-muted: 225 8% 64%; --ds-ink-faint: 225 6% 56%; --ds-primary-text: 245 70% 72%; /* texte/liens sur fond sombre (le primaire plein reste pour les aplats) */ --ds-primary-soft: 245 58% 62% / .16; --ds-shadow-drawer: -12px 0 32px hsl(228 30% 2% / .5); } /* ---- thème clair */ [data-theme="light"] { color-scheme: light; --ds-canvas: 228 20% 97%; --ds-surface: 0 0% 100%; --ds-raised: 228 16% 96%; --ds-hover: 228 16% 93%; --ds-line: 228 14% 89%; --ds-line-strong: 228 12% 78%; --ds-ink: 228 14% 10%; --ds-ink-muted: 228 8% 40%; --ds-ink-faint: 228 6% 44%; --ds-primary-text: 245 60% 54%; --ds-success: 152 55% 34%; /* assombris en clair : ≥ 4.5 sur surface */ --ds-danger: 358 70% 48%; --ds-primary-soft: 245 58% 62% / .12; --ds-shadow-drawer: -12px 0 32px hsl(228 20% 20% / .14); } /* ---- reset minimal */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font: 400 var(--ds-text-md) / var(--ds-leading) var(--ds-font-sans); color: hsl(var(--ds-ink)); background: hsl(var(--ds-canvas)); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, p, ul, ol, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } a { color: inherit; text-decoration: none; } [x-cloak] { display: none !important; } :focus-visible { outline: none; box-shadow: var(--ds-ring); border-radius: var(--ds-radius-sm); } .ds-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .htmx-indicator { opacity: 0; transition: opacity var(--ds-t); } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; } .ds-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---- primitives */ .ds-icon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .ds-icon--sm { width: 14px; height: 14px; } .ds-icon--xs { width: 12px; height: 12px; } .ds-mono { font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); letter-spacing: -.01em; } .ds-num { font-variant-numeric: tabular-nums; } .ds-muted { color: hsl(var(--ds-ink-muted)); } .ds-faint { color: hsl(var(--ds-ink-faint)); } .ds-eyebrow { font-size: var(--ds-text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--ds-ink-muted)); } .ds-btn { display: inline-flex; align-items: center; gap: var(--ds-2); height: 30px; padding: 0 var(--ds-3); border: 1px solid hsl(var(--ds-line-strong)); border-radius: var(--ds-radius); background: hsl(var(--ds-raised)); color: hsl(var(--ds-ink)); font-size: var(--ds-text-sm); font-weight: 500; white-space: nowrap; transition: background var(--ds-t) var(--ds-ease), border-color var(--ds-t) var(--ds-ease); } .ds-btn:hover:not(:disabled) { background: hsl(var(--ds-hover)); } .ds-btn:disabled { opacity: .45; cursor: default; } .ds-btn--primary { background: hsl(var(--ds-primary)); border-color: hsl(var(--ds-primary)); color: hsl(var(--ds-primary-fg)); } .ds-btn--primary:hover:not(:disabled) { background: hsl(245 58% 56%); } .ds-btn--ghost { background: transparent; border-color: transparent; color: hsl(var(--ds-ink-muted)); } .ds-btn--ghost:hover:not(:disabled) { color: hsl(var(--ds-ink)); background: hsl(var(--ds-hover)); } .ds-btn--sm { height: 26px; padding: 0 var(--ds-2); font-size: var(--ds-text-xs); } .ds-btn--icon { width: 30px; padding: 0; justify-content: center; } .ds-btn--icon.ds-btn--sm { width: 26px; } .ds-btn--danger { color: hsl(var(--ds-danger)); } .ds-input, .ds-textarea { width: 100%; padding: 7px 10px; border: 1px solid hsl(var(--ds-line-strong)); border-radius: var(--ds-radius); background: hsl(var(--ds-surface)); color: hsl(var(--ds-ink)); transition: border-color var(--ds-t) var(--ds-ease); } .ds-input::placeholder, .ds-textarea::placeholder { color: hsl(var(--ds-ink-faint)); } .ds-input:focus-visible, .ds-textarea:focus-visible { border-color: hsl(var(--ds-primary)); box-shadow: 0 0 0 3px hsl(var(--ds-primary-soft)); border-radius: var(--ds-radius); } .ds-textarea { resize: none; line-height: 1.45; } .ds-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border: 1px solid hsl(var(--ds-line)); border-radius: var(--ds-radius-sm); background: hsl(var(--ds-raised)); font-size: var(--ds-text-xs); color: hsl(var(--ds-ink-muted)); } .ds-chip--mono { font-family: var(--ds-font-mono); color: hsl(var(--ds-ink)); } .ds-chip--primary { border-color: hsl(var(--ds-primary) / .4); background: hsl(var(--ds-primary-soft)); color: hsl(var(--ds-ink)); } .ds-kbd { font-family: var(--ds-font-mono); font-size: 10px; padding: 1px 5px; border: 1px solid hsl(var(--ds-line-strong)); border-bottom-width: 2px; border-radius: 3px; color: hsl(var(--ds-ink-muted)); } .ds-dot { width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--ds-ink-faint)); flex: none; } .ds-dot--primary { background: hsl(var(--ds-primary)); } .ds-dot--success { background: hsl(var(--ds-success)); } .ds-dot--warning { background: hsl(var(--ds-warning)); } .ds-dot--danger { background: hsl(var(--ds-danger)); } .ds-spinner { width: 12px; height: 12px; border: 1.5px solid hsl(var(--ds-line-strong)); border-top-color: hsl(var(--ds-primary)); border-radius: 50%; animation: ds-spin 800ms linear infinite; flex: none; } @keyframes ds-spin { to { transform: rotate(360deg); } } .ds-menu { min-width: 200px; padding: 4px; border: 1px solid hsl(var(--ds-line-strong)); border-radius: var(--ds-radius); background: hsl(var(--ds-raised)); box-shadow: 0 8px 24px hsl(228 30% 2% / .35); } .ds-menu__item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: var(--ds-radius-sm); font-size: var(--ds-text-sm); text-align: left; } .ds-menu__item:hover { background: hsl(var(--ds-hover)); } .ds-menu__sep { height: 1px; margin: 4px 0; background: hsl(var(--ds-line)); } #toasts { position: fixed; right: var(--ds-4); bottom: var(--ds-4); z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: var(--ds-2); pointer-events: none; } .ds-toast { display: flex; align-items: center; gap: var(--ds-2); padding: 8px 12px; border: 1px solid hsl(var(--ds-line-strong)); border-radius: var(--ds-radius); background: hsl(var(--ds-raised)); font-size: var(--ds-text-sm); pointer-events: auto; } .ds-empty { display: grid; place-items: center; text-align: center; padding: var(--ds-8); color: hsl(var(--ds-ink-muted)); } .ds-empty__title { font-size: var(--ds-text-lg); font-weight: 500; color: hsl(var(--ds-ink)); margin-bottom: var(--ds-1); } .ds-empty .ds-icon { width: 24px; height: 24px; margin-bottom: var(--ds-3); color: hsl(var(--ds-ink-faint)); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }