/* =====================================================================
* Cryptoast Design System v2 — basé sur CRM Monkey (CryptoStratege)
* Référence canonique pour tous les dashboards : notion / media / cs /
* veille / admin (pas redac qui reste à part).
*
* Utilisation :
*
* <-- specifique app
*
* Le toggle dark/light se fait via document.documentElement.classList.toggle('light')
* + localStorage. Restaure le mode AVANT render pour éviter le flash.
* ===================================================================== */
:root {
/* ── Surfaces — escalier 4 niveaux + sidebar ── */
--bg-canvas: #020617;
--bg-surface: #0F172A;
--bg-surface-2: #1E293B;
--bg-surface-3: #293548;
--bg-sidebar: #0B1220;
/* ── Texte ── */
--text-primary: #F8FAFC;
--text-secondary: #CBD5E1;
--text-muted: #94A3B8;
--text-disabled: #64748B;
/* ── Bordures (alphas sur blanc en dark) ── */
--border-subtle: rgba(255, 255, 255, 0.05);
--border-emph: rgba(255, 255, 255, 0.10);
--border-strong: rgba(255, 255, 255, 0.15);
/* ── Brand ── */
--gold: #F59E0B;
--gold-soft: #FBBF24;
--gold-deep: #B45309;
--violet: #8B5CF6;
--violet-soft: #A78BFA;
--violet-deep: #6D28D9;
/* ── Sémantique ── */
--success: #22C55E;
--warning: #F59E0B;
--error: #EF4444;
--info: #3B82F6;
/* ── Pipeline (8 stages, WCAG-conformes) ── */
--pipe-rdv: #3B82F6; /* bleu — RDV / contact pris */
--pipe-noshow: #EC4899; /* rose — no show */
--pipe-relancer: #F59E0B; /* ambre — à relancer */
--pipe-defere: #8B5CF6; /* violet — déféré */
--pipe-attente: #06B6D4; /* cyan — attente paiement */
--pipe-onboard: #22C55E; /* vert — onboarding */
--pipe-perdu: #EF4444; /* rouge — perdu */
--pipe-refuse: #64748B; /* ardoise — refusé */
/* ── Ombres (dark : profondeur via contraste) ── */
--shadow-card: 0 4px 16px rgba(0,0,0,0.40);
--shadow-card-hover: 0 8px 24px rgba(0,0,0,0.55);
--shadow-modal: 0 20px 40px rgba(0,0,0,0.60);
--shadow-glow-gold: 0 0 0 3px rgba(245,158,11,0.25);
--shadow-glow-violet: 0 0 0 3px rgba(139,92,246,0.25);
--shadow-glow-error: 0 0 0 3px rgba(239,68,68,0.25);
/* ── Layout ── */
--topbar-h: 56px;
--sidebar-w: 260px;
/* ── Radii ── */
--radius-button: 8px;
--radius-card: 12px;
--radius-modal: 16px;
--radius-pill: 9999px;
/* ── Timing ── */
--t-fast: 100ms;
--t-base: 150ms;
--t-slow: 200ms;
--t-ease: cubic-bezier(0.4, 0, 0.2, 1);
/* ── Scrollbar ── */
--scroll-thumb: rgba(255, 255, 255, 0.10);
--scroll-thumb-hover: rgba(255, 255, 255, 0.20);
}
/* ── Light mode "à la Apple" ── */
html.light {
--bg-canvas: #F5F5F7;
--bg-surface: #FFFFFF;
--bg-surface-2: #FAFAFA;
--bg-surface-3: #EEEEF0;
--bg-sidebar: #FAFAFA;
--text-primary: #1D1D1F;
--text-secondary: #424245;
--text-muted: #6E6E73;
--text-disabled: #AEAEB2;
--border-subtle: rgba(0, 0, 0, 0.04);
--border-emph: rgba(0, 0, 0, 0.08);
--border-strong: rgba(0, 0, 0, 0.14);
/* Ombres multi-couches diffuses (Apple-style) */
--shadow-card: 0 0.5px 1px rgba(0,0,0,0.04), 0 4px 14px rgba(0,0,0,0.05);
--shadow-card-hover: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.08);
--shadow-modal: 0 4px 8px rgba(0,0,0,0.05), 0 24px 56px rgba(0,0,0,0.14);
--scroll-thumb: rgba(0, 0, 0, 0.15);
--scroll-thumb-hover: rgba(0, 0, 0, 0.25);
}
/* ── Reset (à charger AVANT le CSS app si on veut s'en servir,
sinon les apps gardent leur reset existant) ── */
.cs-reset *, .cs-reset *::before, .cs-reset *::after {
box-sizing: border-box; margin: 0; padding: 0;
}
/* ── Body baseline (à appliquer manuellement via class="cs-base" ou
directement sur ) ── */
.cs-base {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
background: var(--bg-canvas);
color: var(--text-primary);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background-color var(--t-slow) var(--t-ease), color var(--t-slow) var(--t-ease);
}
/* ── Mono & numbers ── */
.cs-num, .cs-mono { font-variant-numeric: tabular-nums; }
.cs-mono { font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace; }
/* ── Scrollbar webkit ── */
.cs-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.cs-scroll::-webkit-scrollbar-track { background: transparent; }
.cs-scroll::-webkit-scrollbar-thumb {
background: var(--scroll-thumb);
border-radius: 10px;
border: 2px solid transparent;
background-clip: padding-box;
}
.cs-scroll::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
/* ── Sélection ── */
.cs-base *::selection {
background: rgba(245, 158, 11, 0.30);
color: var(--text-primary);
}
/* ── Focus visible ── */
.cs-base *:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
border-radius: 4px;
}
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* =====================================================================
* Composants partagés — peuvent être utilisés directement dans n'importe
* quel dashboard via leurs classes `.cs-*`.
* ===================================================================== */
/* ── Cards ── */
.cs-card {
background: var(--bg-surface-2);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
}
/* ── Boutons ── */
.cs-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: var(--radius-button);
background: var(--bg-surface-2); border: 1px solid var(--border-subtle);
color: var(--text-primary); font-size: 13px; font-weight: 500;
font-family: inherit; cursor: pointer;
text-decoration: none;
transition: all var(--t-fast) var(--t-ease);
}
.cs-btn:hover {
background: var(--bg-surface-3);
border-color: var(--border-emph);
}
.cs-btn-primary, .cs-btn-gold {
background: linear-gradient(180deg, var(--gold), #D97706);
border: 1px solid rgba(245,158,11,0.4);
color: #1A0F00; font-weight: 600;
box-shadow: 0 0 0 1px rgba(245,158,11,0.4), 0 2px 8px rgba(245,158,11,0.25);
}
.cs-btn-primary:hover, .cs-btn-gold:hover { filter: brightness(1.08); }
.cs-btn-ai {
background: linear-gradient(135deg, var(--violet), var(--violet-deep));
color: #fff; font-weight: 600;
border: none;
box-shadow: 0 0 0 1px rgba(139,92,246,0.5), 0 2px 10px rgba(139,92,246,0.3);
}
.cs-btn-ai:hover { filter: brightness(1.12); }
.cs-btn-danger {
color: var(--error);
border-color: rgba(239,68,68,0.20);
background: rgba(239,68,68,0.06);
}
.cs-btn-danger:hover { background: rgba(239,68,68,0.12); }
/* ── Tag / chip / pill ── */
.cs-tag {
display: inline-flex; align-items: center;
padding: 2px 8px; border-radius: 4px;
font-size: 12px; font-weight: 500;
border: 1px solid transparent;
white-space: nowrap;
}
.cs-tag-default { background: rgba(148, 163, 184, 0.12); color: var(--text-secondary); border-color: rgba(148,163,184,0.2); }
.cs-tag-gray { background: rgba(148, 163, 184, 0.15); color: #CBD5E1; border-color: rgba(148,163,184,0.25); }
.cs-tag-orange { background: rgba(245, 158, 11, 0.15); color: var(--gold-soft); border-color: rgba(245,158,11,0.30); }
.cs-tag-yellow { background: rgba(250, 204, 21, 0.15); color: #FACC15; border-color: rgba(250,204,21,0.30); }
.cs-tag-green { background: rgba(34, 197, 94, 0.15); color: #4ADE80; border-color: rgba(34,197,94,0.30); }
.cs-tag-blue { background: rgba(59, 130, 246, 0.15); color: #60A5FA; border-color: rgba(59,130,246,0.30); }
.cs-tag-purple { background: rgba(139, 92, 246, 0.15); color: var(--violet-soft); border-color: rgba(139,92,246,0.30); }
.cs-tag-pink { background: rgba(236, 72, 153, 0.15); color: #F472B6; border-color: rgba(236,72,153,0.30); }
.cs-tag-red { background: rgba(239, 68, 68, 0.15); color: #F87171; border-color: rgba(239,68,68,0.30); }
html.light .cs-tag-default { color: var(--text-secondary); }
html.light .cs-tag-gray { color: #475569; }
html.light .cs-tag-orange { color: #B45309; }
html.light .cs-tag-yellow { color: #A16207; }
html.light .cs-tag-green { color: #15803D; }
html.light .cs-tag-blue { color: #1D4ED8; }
html.light .cs-tag-purple { color: #6D28D9; }
html.light .cs-tag-pink { color: #BE185D; }
html.light .cs-tag-red { color: #B91C1C; }
/* ── Theme toggle button (utilisable dans topbar de n'importe quel dashboard) ── */
.cs-theme-icon-light, .cs-theme-icon-dark { display: none; }
html:not(.light) .cs-theme-icon-light { display: inline-block; }
html.light .cs-theme-icon-dark { display: inline-block; }
/* ── Animations utilitaires ── */
@keyframes cs-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes cs-slide-in-right {
from { transform: translateX(16px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes cs-shimmer {
0% { background-position: -400px 0; }
100% { background-position: 400px 0; }
}