/* ============================================================================= Kivo APP — Tokens & variables de design Reprise de la DA "intelligence calme" du site vitrine (bleu-nuit + cyan), adaptée à une APP dense : thème SOMBRE par défaut, échelle typo compacte, couleurs sémantiques systématisées, densité réglable. Thème piloté par data-theme="dark|light" sur . ============================================================================= */ :root { /* --- Marque (constante, héritée du site) --- */ --brand: #3b82f6; --brand-2: #22d3ee; --brand-grad: linear-gradient(135deg, #3b82f6 0%, #22d3ee 100%); --violet: #8b5cf6; /* Accent métier — réécrit par JS si besoin (couleur de marque client) */ --accent: #22d3ee; --accent-rgb: 34, 211, 238; /* --- Typo (héritée du site) --- */ --font-title: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Échelle typo APP (compacte, pas fluide : densité d'outil) */ --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px; --fs-3xl: 34px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* --- Espacement : grille 8px (4px en compact) --- */ --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; /* --- Rayons --- */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px; /* --- Layout shell --- */ --topbar-h: 56px; --sidebar-w: 240px; --sidebar-rail-w: 64px; --drawer-w: 360px; --content-max: 1320px; /* --- Easing / durées (héritées du site) --- */ --ease: cubic-bezier(.22, .61, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --t-fast: .15s; --t: .25s; --t-slow: .4s; /* --- Z-index --- */ --z-sidebar: 30; --z-topbar: 40; --z-drawer: 60; --z-modal: 80; --z-toast: 100; --z-palette: 120; } /* ============================================================================= THÈME SOMBRE (par défaut pour l'app — DA bleu-nuit) ============================================================================= */ :root, [data-theme="dark"] { color-scheme: dark; /* Fonds profonds (du site) */ --bg-900: #090d1a; --bg-800: #0b1020; --bg-700: #11162b; --bg-650: #151b34; --bg-600: #1a2140; /* Surfaces applicatives */ --app-bg: var(--bg-900); --surface: #0e1426; /* cartes, panneaux */ --surface-2: #131a30; /* surface surélevée / hover */ --surface-3: #18203a; /* surface active / sélection */ --surface-inset: #0a0f1e; /* champs, zones creuses */ --border: rgba(255, 255, 255, .09); --border-strong: rgba(255, 255, 255, .16); --border-accent: rgba(var(--accent-rgb), .5); /* Texte */ --text: #f3f6ff; --text-soft: #c2cae6; --text-dim: #8893b8; --text-faint: #5d688f; --text-on-accent: #07101e; /* Sémantiques (sur sombre) */ --success: #22c55e; --success-bg: rgba(34, 197, 94, .14); --success-border: rgba(34, 197, 94, .35); --warn: #f59e0b; --warn-bg: rgba(245, 158, 11, .14); --warn-border: rgba(245, 158, 11, .35); --danger: #ef4444; --danger-bg: rgba(239, 68, 68, .14); --danger-border: rgba(239, 68, 68, .35); --info: #22d3ee; --info-bg: rgba(34, 211, 238, .12); --info-border: rgba(34, 211, 238, .32); --neutral-bg: rgba(255, 255, 255, .07); --neutral-border: rgba(255, 255, 255, .14); /* Accent soft (sélection nav, focus) */ --accent-soft: rgba(var(--accent-rgb), .14); --accent-soft-2: rgba(var(--accent-rgb), .22); /* Canaux (touche de marque) */ --ch-web: #3b82f6; --ch-whatsapp: #25d366; --ch-email: #a78bfa; --ch-messenger: #0084ff; --ch-instagram: #e1306c; --ch-voice: #f59e0b; /* Score lead */ --score-hot: #ef4444; --score-warm: #f59e0b; --score-cold: #38bdf8; /* Ombres */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, .35); --shadow-md: 0 8px 28px rgba(0, 0, 0, .45); --shadow-lg: 0 18px 50px rgba(0, 0, 0, .55); --shadow-drawer: -12px 0 40px rgba(0, 0, 0, .5); /* Skeleton shimmer */ --skeleton-base: rgba(255, 255, 255, .05); --skeleton-shine: rgba(255, 255, 255, .11); /* Sparkline / graphes */ --chart-line: var(--accent); --chart-area: rgba(var(--accent-rgb), .18); --chart-grid: rgba(255, 255, 255, .07); } /* ============================================================================= THÈME CLAIR (option — lecture longue de données) ============================================================================= */ [data-theme="light"] { color-scheme: light; --bg-900: #eef1fb; --bg-800: #f6f8ff; --bg-700: #ffffff; --bg-650: #f2f5fd; --bg-600: #e9eef9; --app-bg: #eef1fb; --surface: #ffffff; --surface-2: #f6f8ff; --surface-3: #eaf0fd; --surface-inset: #f2f5fd; --border: rgba(11, 16, 32, .10); --border-strong: rgba(11, 16, 32, .20); --border-accent: rgba(var(--accent-rgb), .55); --text: #0b1020; --text-soft: #2a3354; --text-dim: #5b6488; --text-faint: #8893b8; --text-on-accent: #07101e; --success: #15803d; --success-bg: rgba(34, 197, 94, .14); --success-border: rgba(21, 128, 61, .30); --warn: #b45309; --warn-bg: rgba(245, 158, 11, .16); --warn-border: rgba(180, 83, 9, .30); --danger: #b91c1c; --danger-bg: rgba(239, 68, 68, .12); --danger-border: rgba(185, 28, 28, .30); --info: #0e7490; --info-bg: rgba(34, 211, 238, .14); --info-border: rgba(14, 116, 144, .30); --neutral-bg: rgba(11, 16, 32, .05); --neutral-border: rgba(11, 16, 32, .12); --accent: #0891b2; --accent-rgb: 8, 145, 178; --accent-soft: rgba(var(--accent-rgb), .12); --accent-soft-2: rgba(var(--accent-rgb), .20); --shadow-sm: 0 2px 8px rgba(11, 16, 32, .08); --shadow-md: 0 8px 28px rgba(11, 16, 32, .12); --shadow-lg: 0 18px 50px rgba(11, 16, 32, .18); --shadow-drawer: -12px 0 40px rgba(11, 16, 32, .15); --skeleton-base: rgba(11, 16, 32, .06); --skeleton-shine: rgba(11, 16, 32, .12); --chart-grid: rgba(11, 16, 32, .08); } /* ============================================================================= DENSITÉ COMPACTE (option) — réduit l'espacement de base ============================================================================= */ [data-density="compact"] { --sp-3: 8px; --sp-4: 12px; --sp-5: 14px; --sp-6: 18px; --fs-base: 12px; --fs-md: 13px; }