/* ============================================================================ BITE HUB · AGENTIC HUB — DESIGN TOKENS v1.0.0 ---------------------------------------------------------------------------- Fuente única de verdad del sistema de diseño. Consumido por: · App AI-OPS (móvil/PWA, :3005) · Dashboard Gerencial (escritorio, :3004) CÓMO USAR: Luego en CSS o estilos inline: color: var(--text-primary); REGLA: este archivo NO contiene componentes ni layout, solo variables. Editar SIEMPRE la copia canónica en /design-system y volver a desplegar a los public/ de cada app (ver README). ========================================================================== */ :root { /* ── MARCA ────────────────────────────────────────────────────────────── Acento principal del producto. Azul confiado, legible en oscuro. */ --accent: #4A9EFF; --accent-hover: #6BB0FF; --accent-active: #3585E6; --accent-contrast: #FFFFFF; /* texto sobre fondo --accent */ --accent-subtle: rgba(74, 158, 255, 0.12); /* tinte de fondo */ --accent-border: rgba(74, 158, 255, 0.32); /* ── NEUTRALES · CAPAS DE ELEVACIÓN ───────────────────────────────────── Undertone frío-neutro (no navy plano). Cada capa = más cercana al ojo. */ --bg-base: #0A0B0F; /* fondo de la app / página */ --bg-sunken: #07080B; /* zonas hundidas (inputs, code) */ --bg-surface: #13141A; /* cards, paneles */ --bg-surface-2: #1B1D26; /* hover / superficie elevada */ --bg-header: #0F1016; /* barras fijas (header, tab-bar) */ --bg-overlay: rgba(6, 7, 11, 0.78); /* backdrop de modales */ /* ── BORDES ─────────────────────────────────────────────────────────────*/ --border-subtle: #1F2230; /* divisores tenues */ --border-default: #2A2E3E; /* borde estándar de card */ --border-strong: #3A3F52; /* hover / énfasis */ /* ── TEXTO ────────────────────────────────────────────────────────────── Tres niveles + deshabilitado. Todos pasan contraste sobre --bg-surface. */ --text-primary: #F4F5F7; --text-secondary: #A0A6B4; /* sube de #8892a4 → mejor contraste */ --text-tertiary: #6B7180; /* labels, metadatos */ --text-disabled: #474C5A; --text-on-accent: #FFFFFF; /* ── SEMÁNTICOS ───────────────────────────────────────────────────────── Modernos y desaturados. Cada uno: base / -bg (tinte) / -border. */ --success: #34D399; --success-bg: rgba(52, 211, 153, 0.12); --success-border: rgba(52, 211, 153, 0.30); --warning: #FBBF24; --warning-bg: rgba(251, 191, 36, 0.12); --warning-border: rgba(251, 191, 36, 0.30); --danger: #F87171; --danger-bg: rgba(248, 113, 113, 0.12); --danger-border: rgba(248, 113, 113, 0.32); --info: var(--accent); --info-bg: var(--accent-subtle); --info-border: var(--accent-border); --neutral: #6B7180; /* estado "sin datos" / gris */ --neutral-bg: rgba(107, 113, 128, 0.12); /* ── IDENTIDAD POR AGENTE ─────────────────────────────────────────────── Color firma de cada agente. Alineados con los semánticos para coherencia.*/ --agent-concierge: #34D399; /* Ventas / atención (verde) */ --agent-brand-guardian: #F87171; /* Reputación / marca (rojo) */ --agent-staff-mentor: #FBBF24; /* Operación / staff (ámbar) */ --agent-cost-sentinel: #4A9EFF; /* Costos / finanzas (azul) */ /* ── SEMÁFORO (Dashboard) → alias a semánticos ──────────────────────────*/ --semaforo-verde: var(--success); --semaforo-amarillo: var(--warning); --semaforo-rojo: var(--danger); --semaforo-gris: var(--neutral); /* ── ESPACIADO · escala 8pt (base 4) ────────────────────────────────────*/ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ── RADIOS ─────────────────────────────────────────────────────────────*/ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; /* ── TIPOGRAFÍA ─────────────────────────────────────────────────────────*/ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Inter', system-ui, sans-serif; /* futuro: Satoshi/General Sans */ --font-mono: 'JetBrains Mono', 'SF Mono', 'Courier New', monospace; /* Escala tipográfica */ --text-2xs: 10px; --text-xs: 11px; --text-sm: 13px; --text-base: 14px; --text-md: 16px; --text-lg: 20px; --text-xl: 28px; --text-2xl: 36px; --text-3xl: 48px; /* Pesos */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Interlineado */ --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.55; --leading-relaxed: 1.7; /* Tracking (espaciado de letra) — labels en mayúsculas */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-wider: 0.12em; /* ── ELEVACIÓN · sombras para UI oscura ───────────────────────────────── Sutiles + un highlight superior de 1px para borde "premium". */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.40); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.50); --highlight-top: inset 0 1px 0 rgba(255, 255, 255, 0.04); --ring-focus: 0 0 0 3px rgba(74, 158, 255, 0.35); /* ── Z-INDEX · escala única ─────────────────────────────────────────────*/ --z-base: 1; --z-sticky: 20; --z-header: 40; --z-nav: 50; --z-overlay: 100; --z-toast: 200; /* ── MOVIMIENTO ─────────────────────────────────────────────────────────*/ --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ============================================================================ UTILIDADES FUNDAMENTALES (opt-in) Clases mínimas y de bajo riesgo. Todo lo demás vive en cada app. ========================================================================== */ /* Números alineados (KPIs, montos, tablas) — clave para look ejecutivo. */ .tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* Anillo de foco accesible y consistente (WCAG) en cualquier control. */ .focus-ring:focus-visible { outline: none; box-shadow: var(--ring-focus); } /* Render de texto más nítido para tipografía fina sobre fondo oscuro. */ .smooth-text { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }