/* --------------------------------------------------------------------------- * Agentic OS — design system * * Les valeurs viennent des maquettes Temp/design-system-et-pole/ : le couple * clair/sombre de chaque token a ete etabli par diff positionnel des deux * fichiers .dc.html (meme ligne, meme rang de couleur), pas a l'estime. * * Les maquettes dupliquaient toute la palette entre les deux themes ; ici un * seul jeu de tokens, la bascule se fait sur [data-theme] pose sur . * ------------------------------------------------------------------------- */ :root { /* Fonds et surfaces */ --bg: #F7F7F8; --surface: #FFFFFF; --surface-2: #F4F4F6; --surface-3: #EFEFF2; --surface-4: #EDEDF0; /* Bordures, du plus discret au plus marque */ --border: #E6E6EA; --border-2: #DCDCE2; --border-3: #D6D6DD; /* Texte */ --text: #16161A; --text-2: #33333A; --muted: #6E6E78; --muted-2: #767680; --muted-3: #55555F; /* Accent violet */ --accent: #7C5CFF; /* seul token identique dans les deux themes */ --accent-strong: #6B47F5; --accent-text: #5B34E8; --accent-bg: #EFEAFF; --accent-bg-2: #F2EEFF; --accent-border: #DCD3FF; --nav-active: #ECEAF8; /* Etats */ --success: #14A06A; --success-text: #0F8A5B; --success-bg: #E7F7EF; --info: #2C7BE5; --info-text: #1C6FD0; --info-bg: #E4EFFB; --warn: #B4740A; --warn-text: #8A5D08; --warn-bg: #FDF7E8; --danger: #D93F3F; --danger-text: #C4322F; --danger-border: #F0C9C6; --radius: 10px; --radius-sm: 8px; --shadow-modal: 0 24px 60px rgba(20, 20, 30, .18); --font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; } /* Sombre : applique si l'utilisateur n'a rien choisi mais que son OS est en * sombre, ou si le choix explicite [data-theme="dark"] est pose. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #08080A; --surface: #0D0D11; --surface-2: #101016; --surface-3: #16161C; --surface-4: #1A1A21; --border: #1C1C23; --border-2: #23232B; --border-3: #26262F; --text: #E8E8ED; --text-2: #C9C9D4; --muted: #70707A; --muted-2: #7A7A88; --muted-3: #A8A8B6; --accent-strong: #8E72FF; --accent-text: #B7A6FF; --accent-bg: #241F3A; --accent-bg-2: #1A1626; --accent-border: #2E2A43; --nav-active: #191921; --success: #3FCF8E; --success-text: #6FE0AE; --success-bg: #12281F; --info: #4C9AFF; --info-text: #6BB2FF; --info-bg: #1D2A3A; --warn: #F5A524; --warn-text: #F0C57A; --warn-bg: #120E07; --danger: #F26D6D; --danger-text: #F08C8C; --danger-border: #4A2626; --shadow-modal: 0 24px 60px rgba(0, 0, 0, .5); } } :root[data-theme="dark"] { --bg: #08080A; --surface: #0D0D11; --surface-2: #101016; --surface-3: #16161C; --surface-4: #1A1A21; --border: #1C1C23; --border-2: #23232B; --border-3: #26262F; --text: #E8E8ED; --text-2: #C9C9D4; --muted: #70707A; --muted-2: #7A7A88; --muted-3: #A8A8B6; --accent-strong: #8E72FF; --accent-text: #B7A6FF; --accent-bg: #241F3A; --accent-bg-2: #1A1626; --accent-border: #2E2A43; --nav-active: #191921; --success: #3FCF8E; --success-text: #6FE0AE; --success-bg: #12281F; --info: #4C9AFF; --info-text: #6BB2FF; --info-bg: #1D2A3A; --warn: #F5A524; --warn-text: #F0C57A; --warn-bg: #120E07; --danger: #F26D6D; --danger-text: #F08C8C; --danger-border: #4A2626; --shadow-modal: 0 24px 60px rgba(0, 0, 0, .5); } /* --- Base ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 13px; -webkit-font-smoothing: antialiased; } a { color: var(--accent-strong); text-decoration: none; } a:hover { color: var(--accent-text); } code, .mono { font-family: var(--font-mono); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-3); border-radius: var(--radius-sm); border: 3px solid var(--bg); } /* --- Composants ---------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; } .card__title { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; } .stat__value { font-size: 22px; font-weight: 600; letter-spacing: -.02em; } .stat__label { font-size: 12px; color: var(--muted); margin-top: 2px; } .badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 18px; } .badge--ok { background: var(--success-bg); color: var(--success-text); } .badge--info { background: var(--info-bg); color: var(--info-text); } .badge--warn { background: var(--warn-bg); color: var(--warn-text); } .badge--danger { background: var(--danger-bg, var(--surface-4)); color: var(--danger-text); } .badge--accent { background: var(--accent-bg); color: var(--accent-text); } .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } .dot--ok { background: var(--success); } .dot--danger { background: var(--danger); } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 500; } .btn--primary { background: var(--accent-strong); color: #fff; } .btn--primary:hover { background: var(--accent-text); color: #fff; } .btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border-2); } .btn--ghost:hover { background: var(--surface-2); } .logo { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(140deg, var(--accent-strong), var(--info)); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; }