/* ════════════════════════════════════════════════════════════════════ LM Tracker — design tokens (shadcn-style HSL palette) Works together with Tailwind CDN config in templates/base.html.twig. Dark mode = ═════════════════════════════════════════════════════════════════════ */ :root { --background: 0 0% 100%; --foreground: 222 47% 11%; --card: 0 0% 100%; --card-foreground: 222 47% 11%; --popover: 0 0% 100%; --popover-foreground: 222 47% 11%; --primary: 221 83% 43%; /* indigo-blue 2025 */ --primary-foreground: 210 40% 98%; --secondary: 210 40% 96%; --secondary-foreground: 222 47% 11%; --muted: 210 40% 96%; --muted-foreground: 215 16% 47%; --accent: 210 40% 96%; --accent-foreground: 222 47% 11%; --destructive: 0 84% 55%; --destructive-foreground: 210 40% 98%; --success: 152 76% 35%; --warning: 38 92% 50%; --info: 199 89% 48%; --border: 214 32% 91%; --input: 214 32% 91%; --ring: 221 83% 55%; --sidebar: 222 47% 11%; --sidebar-foreground: 210 40% 96%; --sidebar-muted: 215 20% 65%; --sidebar-accent: 217 33% 17%; --sidebar-border: 217 33% 20%; --radius: 0.6rem; color-scheme: light; } .dark { --background: 222 47% 6%; --foreground: 210 40% 96%; --card: 222 47% 8%; --card-foreground: 210 40% 96%; --popover: 222 47% 8%; --popover-foreground: 210 40% 96%; --primary: 217 91% 65%; --primary-foreground: 222 47% 11%; --secondary: 217 33% 15%; --secondary-foreground: 210 40% 96%; --muted: 217 33% 15%; --muted-foreground: 215 20% 60%; --accent: 217 33% 18%; --accent-foreground: 210 40% 96%; --destructive: 0 72% 55%; --destructive-foreground: 210 40% 98%; --success: 152 65% 45%; --warning: 38 95% 60%; --info: 199 89% 60%; --border: 217 33% 18%; --input: 217 33% 18%; --ring: 217 91% 65%; --sidebar: 222 47% 4%; --sidebar-foreground: 210 40% 96%; --sidebar-muted: 215 20% 55%; --sidebar-accent: 217 33% 12%; --sidebar-border: 217 33% 12%; color-scheme: dark; } html, body { height: 100%; } /* Scrollbars discrètes */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 999px; border: 2px solid hsl(var(--background)); } *::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / .4); } /* Selection */ ::selection { background: hsl(var(--primary) / .25); } /* Chart.js wrapper : ratio contrôlé par hauteur explicite */ .chart-wrap { position: relative; width: 100%; } .chart-wrap > canvas { max-width: 100% !important; height: 100% !important; } /* Dark-mode aware chart text (Chart.js lit ces couleurs à runtime via script) */ /* Sanitized LLM HTML output */ .prose-llm mark { background: hsl(var(--warning) / .25); color: inherit; padding: 0 .15em; border-radius: 2px; } /* Focus ring cohérent */ :where(button, a, input, select, textarea):focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; border-radius: calc(var(--radius) - 2px); } /* Transition douce sur le theme switch */ html.theme-transition, html.theme-transition * { transition: background-color .2s ease, color .2s ease, border-color .2s ease !important; }